如何利用 `Vite` 的 `lib` 模式，将 Vue 组件库打包为多种格式，并支持按需引入？ - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

大家好，我是你们的老朋友，今天咱们来聊聊如何用 Vite 的 lib 模式，像变魔术一样，把你的 Vue 组件库打包成各种口味，还能按需点单，简直不要太方便！

开场白：组件库打包，不能只是“一锤子买卖”！

话说，咱们辛辛苦苦撸出来的 Vue 组件库，如果打包出来只能一股脑儿地全部引入，那简直就是暴殄天物，浪费用户的带宽和感情嘛！想像一下，用户只想用你库里的一个按钮，结果却要下载整个“豪华套餐”，这体验，简直惨不忍睹！

所以，组件库打包，必须得支持按需引入，就像去餐厅吃饭，想吃啥点啥，多自由！而 Vite 的 lib 模式，就是实现这个目标的利器。

第一幕：vite.config.js 里的乾坤大挪移

首先，咱们得在 vite.config.js 里动动手脚，告诉 Vite，咱们要用 lib 模式打包。

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import dts from 'vite-plugin-dts' // 用于生成 .d.ts 类型文件

// 导入 path 模块
import * as path from 'path';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    dts({ // 生成 TypeScript 类型声明文件
      outputDir: 'dist/types', // 输出目录
      tsConfigFilePath: 'tsconfig.json', // tsconfig.json 文件路径
      rollupTypes: true, // 启用rollupTypes
    }),
  ],
  build: {
    lib: {
      // 入口文件，别忘了改成你组件库的入口
      entry: path.resolve(__dirname, 'src/index.ts'),
      // 组件库名字，将来会被用作 umd/iife 模式下的全局变量
      name: 'MyAwesomeComponentLibrary',
      // 打包格式
      formats: ['es', 'cjs', 'umd', 'iife'], // 'es'：ES Module, 'cjs'：CommonJS, 'umd'：UMD, 'iife'：Immediately Invoked Function Expression
      // 文件名
      fileName: (format) => `my-awesome-component-library.${format}.js`
    },
    rollupOptions: {
      // 确保外部化处理那些你不想打包进库的依赖
      external: ['vue'], // 排除 vue
      output: {
        // 在 UMD 构建模式下为这些外部化的依赖提供一个全局变量
        globals: {
          vue: 'Vue'
        }
      }
    },
    emptyOutDir: false, // 不清空输出目录
  },
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src'), // 配置 @ 符号指向 src 目录
    }
  }
})

这段代码里，重点关注 build.lib 里的配置：

entry：组件库的入口文件，通常是 src/index.ts 或者 src/index.js。这里需要使用 path.resolve 来确保路径的正确性。
name：组件库的名字，这个名字会在 UMD/IIFE 模式下作为全局变量使用，所以要起一个响亮的名字，比如 MyAwesomeComponentLibrary。
formats：指定打包的格式，常见的有 es (ES Module)、cjs (CommonJS)、umd (UMD)、iife (Immediately Invoked Function Expression)。
- es 格式：适用于现代浏览器和构建工具，支持 tree-shaking，按需加载。
- cjs 格式：适用于 Node.js 环境。
- umd 格式：兼容各种环境，但体积较大。
- iife 格式：适用于直接在浏览器中通过 <script> 标签引入。
fileName：指定输出的文件名，可以根据 format 来动态生成文件名。

build.rollupOptions 里的配置也很重要：

external：指定不需要打包进组件库的依赖，比如 vue。
output.globals：在 UMD 模式下，为外部依赖提供全局变量，比如 vue: 'Vue'，这样才能在浏览器中使用 UMD 格式的组件库。

同时，我们引入了 vite-plugin-dts 插件来生成 .d.ts 类型文件，方便 TypeScript 用户使用你的组件库。

第二幕：组件库的“瘦身”秘籍 —— Tree-shaking

Tree-shaking，顾名思义，就是“摇树”，把组件库里没用的代码“摇”掉，减小体积。Vite 默认支持 Tree-shaking，但要让它发挥作用，咱们还得注意以下几点：

使用 ES Module 语法： 确保你的组件和入口文件都使用 ES Module 语法（import 和 export），而不是 CommonJS 语法（require 和 module.exports）。
避免副作用： 尽量避免在组件文件中写有副作用的代码，比如直接修改全局变量。

举个例子，假设你的组件库里有 Button.vue 和 Input.vue 两个组件，入口文件 src/index.ts 如下：

import Button from './components/Button.vue';
import Input from './components/Input.vue';

export {
  Button,
  Input
};

如果用户只引入了 Button 组件，那么 Vite 会自动把 Input 组件的代码从最终的打包结果中移除，实现按需加载。

第三幕：按需引入的“正确姿势”

打包好了组件库，接下来就是如何在项目中使用它了。按需引入的方式有很多种，咱们来一一介绍：

直接引入 ES Module 文件：
```
import { Button } from 'my-awesome-component-library/es/my-awesome-component-library.es.js';
```
这种方式最直接，但需要指定 ES Module 文件的路径，不太方便。

使用插件（推荐）：

可以使用 unplugin-vue-components 插件，它可以自动注册组件，无需手动引入。

首先，安装插件：

npm install unplugin-vue-components -D

然后，在 vite.config.js 中配置插件：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import Components from 'unplugin-vue-components/vite'
import { resolve } from 'path';

export default defineConfig({
 plugins: [
   vue(),
   Components({
     resolvers: [
       {
         type: 'component',
         resolve: (name) => {
           if (name.startsWith('My')) { // 假设你的组件都以 My 开头
             return { name, from: 'my-awesome-component-library' }
           }
         },
       },
     ],
   }),
 ],
 resolve: {
   alias: {
     '@': resolve(__dirname, 'src'),
   },
 },
})

这样，你就可以在 Vue 组件中直接使用 MyButton 组件，而无需手动引入：

<template>
 <MyButton>Click me!</MyButton>
</template>

unplugin-vue-components 会自动从 my-awesome-component-library 中引入 MyButton 组件，并进行注册。

手动引入并注册：

import { Button } from 'my-awesome-component-library';

export default {
 components: {
   MyButton: Button
 }
}

这种方式比较繁琐，但可以更精确地控制组件的引入和注册。

第四幕：TypeScript 的“保驾护航”

如果你的组件库是用 TypeScript 写的，那么生成 .d.ts 类型文件就非常重要了。vite-plugin-dts 插件可以自动生成 .d.ts 文件，让 TypeScript 用户在使用你的组件库时，获得类型提示和自动补全的功能。

确保你的 tsconfig.json 文件配置正确，例如：

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "moduleResolution": "node",
    "strict": true,
    "jsx": "preserve",
    "sourceMap": true,
    "resolveJsonModule": true,
    "esModuleInterop": true,
    "lib": ["esnext", "dom"],
    "types": ["node"],
    "declaration": true, // 启用声明文件生成
    "declarationDir": "types", // 声明文件输出目录
    "emitDeclarationOnly": true // 只生成声明文件
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules", "dist"]
}

第五幕：发布你的组件库

打包好了组件库，接下来就可以发布到 npm 上了。

创建 npm 账号： 如果你还没有 npm 账号，先去 npm 官网注册一个。
登录 npm： 在命令行中输入 npm login，输入你的用户名、密码和邮箱。

修改 package.json： 确保你的 package.json 文件包含以下信息：

{
 "name": "my-awesome-component-library",
 "version": "1.0.0",
 "description": "My awesome Vue component library",
 "main": "./dist/my-awesome-component-library.cjs.js", // CommonJS 入口
 "module": "./dist/my-awesome-component-library.es.js", // ES Module 入口
 "types": "./dist/types/index.d.ts", // TypeScript 类型定义文件入口
 "files": [
   "dist" // 指定要发布的文件
 ],
 "repository": {
   "type": "git",
   "url": "https://github.com/your-username/my-awesome-component-library.git"
 },
 "keywords": [
   "vue",
   "component",
   "library"
 ],
 "author": "Your Name",
 "license": "MIT",
 "peerDependencies": {
   "vue": "^3.0.0" // 指定 Vue 版本
 }
}

main：指定 CommonJS 格式的入口文件。
module：指定 ES Module 格式的入口文件。
types：指定 TypeScript 类型定义文件的入口。
files：指定要发布到 npm 的文件，通常是 dist 目录。
peerDependencies：指定组件库依赖的 Vue 版本，避免版本冲突。

发布到 npm： 在命令行中输入 npm publish，就可以把你的组件库发布到 npm 上了。

总结：Vite + lib 模式，让组件库开发事半功倍！

通过 Vite 的 lib 模式，我们可以轻松地将 Vue 组件库打包成各种格式，并支持按需引入，大大提升了用户体验和开发效率。

特性	优点	缺点
多格式打包	支持 ES Module、CommonJS、UMD、IIFE 等多种格式，满足不同环境的需求。
按需引入	通过 Tree-shaking 技术，可以只引入需要的组件，减小打包体积，提升性能。
TypeScript 支持	可以自动生成 `.d.ts` 类型文件，方便 TypeScript 用户使用你的组件库。
配置简单	Vite 的配置相对简单，上手容易。
生态丰富	Vite 的生态系统非常丰富，有很多插件可以帮助你更好地开发组件库。
学习成本	需要学习 Vite 的配置和插件的使用方法。

记住，组件库开发不是一蹴而就的，需要不断学习和实践，才能打造出高质量、易用的组件库。希望今天的分享对你有所帮助，祝你早日成为组件库开发高手！

发表回复 取消回复

发表回复取消回复