vite打包lib库

孤独的根号3
17,269 阅读3分钟

vite打包lib库

背景

与上一篇文章原因一样，公司内部开发的私有包,统一管理等原因，此篇文章介绍使用vite打包lib库。

什么是lib库

LIB是静态链接库
lib应该说是一个程序集, 只是把一些相应的函数总结在一起, 如果调用lib中的函数,在工程编译时,这些调用的函数都将参加编译.
从内存管理的角度来看，lib必须被链接到主程序中，主程序进入内存，lib也同时进入内存 举个例子：an-design不是lib库，它只是一个基于vue或者react的一个组件ui组件库，vue和react是框架，而jquery就算是一个lib库，它集成了多种函数，可以用于用于基于js的各种平台上（只要你不闲它又慢又大~）。

为什么使用vite

官网说了很多，比如：浏览器开始原生支持 ES 模块，且越来越多 JavaScript 工具使用编译型语言编写。在我这很简单，因为我只调通了这一种。。。。

工具

vite
rollup

安装

你可以使用vite官网推荐的搭建vite 我们目前准备使用vue3框架来写架构以及组件，所以可以使用vue3的官方推荐的 命令行工具 (CLI)

$ yarn create vite <project-name> --template vue
$ cd <project-name>
$ yarn
$ yarn dev

然后访问 http://localhost:3000/

image.png vue-cli 自带的是 webpack 的打包方式，打出的包体积有点大，而 vite 自带的是 rollup 的打包方式，这种方式打包的体积就非常小，官网也有一些使用说明，所以学会之后还是比较很方便的。

vite 的库项目可以分为两类：（我自己分的）

  • 一个是纯js的项目，不带HTML；
  • 一个是可以带上HTML（模板）的项目，比如UI库。

下面分别介绍一下编写和打包方式，其实大同小异。

纯js的库项目

export function is(val, type) {
  return toString.call(val) === `[object ${type}]`
}

export function isDef(val) {
  return typeof val !== 'undefined'
}

export function isUnDef(val) {
  return !isDef(val)
}

export function isObject(val) {
  return val !== null && is(val, 'Object')
}

代码比较简单,只需要将你想要打包的方法和函数export就可以了

想要打包的话，只能有一个出口文件，所以内部的代码结构要设置好。

带HTML的库项目

与纯js方式一样，将需要导出的组件export就可以了 首先创建一个自定义的测试组件文件夹 我们就起名 packages 好了 然后建立 testA、testB、testC等组件， 目录结构如下：\

  • index.less作为所有组件的样式入口
  • index.ts为所有组件的入口

image.png
TextA.vue:

<template>
  <div>123</div>
</template>

<script setup>

</script>

<style scoped>

</style>

textA/index.ts:

import TestA from './src/TestA.vue';
export {
    TestA
}

packages/index.ts:

import type {App} from "vue";
import {TestA} from "./testA";
import './index.less';


const components: any[] = [TestC, TestA, TestB];
const install = (app: App) => {
    components.forEach(component => app.component((component.name, component)))
}
export {TestA}
export default {
    install,
    ...components
}

设置vite.config.js

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({

  // 打包配置
  build: {
    lib: {
      entry:  'src/packages/index.ts', // 设置入口文件
      name: 'vite-lib', // 起个名字，安装、引入用
      fileName: (format) => `vite-lib.${format}.js` // 打包后的文件名
    },
    sourcemap: true, // 输出.map文件
    rollupOptions: {
      // 确保外部化处理那些你不想打包进库的依赖
      external: ['vue', 'ant-design-vue'],
      output: {
        // 在 UMD 构建模式下为这些外部化的依赖提供一个全局变量
        globals: {
          vue: 'Vue',
          'ant-design-vue': 'ant-design-vue'
        }
      }
    }
  },
  plugins: [vue()],
  css: {
    preprocessorOptions: {
      less: {
        javascriptEnabled: true,
        additionalData: '@import "./src/packages/index.less";',
      }
    }
  }
})
  • entry：指定要打包的入口文件。
  • name：包的名称
  • fileName：包文件的名称，默认是umd和es两个文件。
  • sourcemap：是否生成 .map 文件，默认是不会生成的，如果需要的话需要设置为 true。
  • rollupOptions：如果项目引用了第三方插件，那么需要在这里设置排除，如果不设置的话，第三方插件的源码也会被打包进来，这样打包文件就变大了。排除之后第三方的插件会单独存在。
  • css: 引入公共样式

打包

yarn bulid

打出来的文件目录是：

image.png
vite 会按照这里的设置进行打包，打包分为两种模式：

  • umd：打包后代码很紧凑、体积小，但是不易读；
  • es：打包后的代码和我们写的代码很像，易读，但是体积大。 \
  • js.map: 调试代码

如何使用lib包

与组件库一样，直接将你导出的testA组件直接导入到组件中，当做组件使用即可：

<template>
<div>
<TestA></TestA>
</div>
  
</template>
<script setup>
import { ref } from 'vue'
import {TestA} from '../../dist/vite-lib.es'
// import {TestA} from '../../dist/vite-lib.umd' // 二者皆可

const count = ref(0)
</script>

<style scoped>
a {
  color: #42b983;
}
</style>

页面效果：

image.png

发布

创建package.json文件

{
    "name": "vite-lib", // lib包的名字 // 必须
    "version": "0.0.4", // 版本号 // 必须
    "description": "JavaScript 的小工具，验证 JavaScript 的数据类型，输出调试信息等。", //描述
    "main": "./dist/vite-lib.umd.js",  // 入口文件地址
    "module": "./dist/vite-lib.es.js",  // 入口文件地址
    "exports": { 
        ".": { 
            "import": "./dist/vite-lib.es.js",
            "require": "./dist/vite-lib.umd.js"
        } 
    },
    "private": false，
    "dependencies": {   // 依赖
        "ant-design-vue": "^2.2.8",
        "vue": "^3.2.16" 
    }, 
    "devDependencies": { "
        @vitejs/plugin-vue": "^1.9.3", 
        "vite": "^2.6.4" 
    }
}

根据上章内容，在dist文件下，直接进行publish：
npm publish

image.png

使用

当做普通组件一样调用：
yarn add vite-lib \

HelloWorld.vue:

<template>
  <div>
    <TestA></TestA>
  </div>
  
</template>
<script setup>
import { ref } from 'vue'
import {TestA} from 'vite-lib'

const count = ref(0)
</script>

<style scoped>

</style>

因为vit-lib基于ant-design-vue, 所以我们本地也要下载依赖引入进去才可使用
第一次写文章 文笔不好 尽请见谅。

avatar
文章
阅读
粉丝