如何利用 `Vite` 的 `lib` 模式，将 Vue 组件库打包为多种格式（ESM, UMD, CommonJS）？

各位观众，大家好！欢迎来到我的“Vite 组件库打包魔法秀”！今天咱就来聊聊如何用 Vite 的 lib 模式，把你的 Vue 组件库变成各种格式的变形金刚，让它能在各种环境下都能愉快地玩耍。

前言：组件库打包的必要性

想象一下，你辛辛苦苦写了一个 Vue 组件库，里面包含了各种炫酷的组件。你想把它分享给全世界，让别人也能用上你的宝贝。但是，问题来了：

• 不同的项目使用的模块化方案可能不同： 有的项目用 ES modules，有的用 CommonJS，还有的直接在浏览器里用 <script> 标签引用。
• 不同的环境可能需要不同的格式： 浏览器需要 ESM 或 UMD，Node.js 需要 CommonJS。

所以，我们需要把组件库打包成多种格式，以适应不同的需求。

Vite lib 模式简介

Vite 的 lib 模式就是专门为打包库设计的。它能帮你把你的代码打包成各种格式，并且还能进行代码分割、压缩优化等操作。

第一步：搭建项目环境

首先，我们需要一个 Vue 组件库项目。如果你还没有，可以创建一个新的：

npm create vite my-vue-components --template vue
cd my-vue-components
npm install

或者用你已经写好的组件库，这都行。

第二步：配置 vite.config.js

关键的一步来了！我们需要修改 vite.config.js 文件，告诉 Vite 我们要打包成库，以及打包的格式。

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

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  build: {
    lib: {
      // 入口文件，就是你的组件库的入口文件
      entry: resolve(__dirname, 'src/index.js'),
      // 组件库的名字，会作为 UMD 包的全局变量名
      name: 'MyVueComponents',
      // 文件名，不用写后缀名
      fileName: (format) => `my-vue-components.${format}.js`
    },
    rollupOptions: {
      // 确保外部化处理那些你不想打包进库的依赖
      external: ['vue'],
      output: {
        // 在 UMD 构建模式下，为这些外部化的依赖提供一个全局变量
        globals: {
          vue: 'Vue'
        }
      }
    }
  }
})

代码解释：

• lib.entry: 指定组件库的入口文件。通常是一个 index.js 文件，用于导出所有的组件。
• lib.name: 指定组件库的名字。这个名字会作为 UMD 包的全局变量名，比如 window.MyVueComponents。
• lib.fileName: 指定输出的文件名。可以是一个字符串，也可以是一个函数。如果是函数，会根据不同的格式生成不同的文件名。
• rollupOptions.external: 指定哪些依赖不需要打包进库。一般来说，像 Vue 这种大型的依赖，我们都希望外部化，让用户自己去引入。
• rollupOptions.output.globals: 在 UMD 构建模式下，为外部化的依赖提供一个全局变量。比如，我们把 vue 外部化了，那么就需要告诉 UMD，vue 对应的全局变量是 Vue。

第三步：创建入口文件 src/index.js

我们需要创建一个入口文件 src/index.js，用于导出所有的组件。

// src/index.js
import MyButton from './components/MyButton.vue'
import MyInput from './components/MyInput.vue'

// 导出单个组件
export { MyButton, MyInput }

// 导出所有组件，用于 Vue.use()
export default {
  install: (app) => {
    app.component('MyButton', MyButton)
    app.component('MyInput', MyInput)
  }
}

代码解释：

• 首先，我们导入所有的组件。
• 然后，我们导出单个组件，方便用户按需引入。
• 最后，我们导出一个 install 函数，用于 Vue.use() 注册组件。

第四步：添加组件（可选）

如果你还没有组件，可以添加一些简单的组件。比如：

// src/components/MyButton.vue
<template>
  <button class="my-button">{{ text }}</button>
</template>

<script>
export default {
  props: {
    text: {
      type: String,
      default: 'Click me'
    }
  }
}
</script>

<style scoped>
.my-button {
  background-color: #4CAF50;
  border: none;
  color: white;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  cursor: pointer;
}
</style>

// src/components/MyInput.vue
<template>
  <input type="text" class="my-input" :placeholder="placeholder">
</template>

<script>
export default {
  props: {
    placeholder: {
      type: String,
      default: 'Enter text'
    }
  }
}
</script>

<style scoped>
.my-input {
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 14px;
}
</style>

第五步：运行打包命令

终于到了激动人心的时刻！运行打包命令：

npm run build

Vite 就会根据你的配置，把你的组件库打包成各种格式。打包后的文件会放在 dist 目录下。

第六步：查看打包结果

打开 dist 目录，你会看到类似这样的文件：

dist
├── my-vue-components.es.js  # ES module 格式
├── my-vue-components.umd.js # UMD 格式
├── my-vue-components.umd.cjs # UMD 格式, CommonJS
└── style.css #样式文件，如果你的组件有样式的话

第七步：使用组件库

现在，你可以把你的组件库分享给别人了！别人可以用以下几种方式使用你的组件库：

• ES modules：

  import { MyButton, MyInput } from 'my-vue-components'

• UMD：

  <script src="https://unpkg.com/vue@3"></script>
  <script src="my-vue-components.umd.js"></script>
  <script>
    // 通过全局变量 MyVueComponents 使用组件
    const { MyButton, MyInput } = MyVueComponents
    // 或者 Vue.use(MyVueComponents)
  </script>

• CommonJS：

  const { MyButton, MyInput } = require('my-vue-components')

深入配置：更多选项

Vite 的 lib 模式还提供了很多其他的配置选项，可以让你更灵活地控制打包过程。

配置项	类型	描述
lib.formats	string[]	指定要打包的格式。可选值有 'es', 'cjs', 'umd', 'iife'。默认值是 ['es', 'umd']。
build.cssCodeSplit	boolean	是否将 CSS 分割成单独的文件。默认值是 true。
build.minify	boolean	是否压缩代码。可选值有 true, false, 'terser', 'esbuild'。默认值是 true。
build.sourcemap	boolean	是否生成 sourcemap 文件。默认值是 false。

实战案例：打包一个包含样式的组件库

如果你的组件库包含样式，Vite 会自动把样式提取到一个单独的 CSS 文件中。你只需要在组件中引入样式即可。

// src/components/MyButton.vue
<template>
  <button class="my-button">{{ text }}</button>
</template>

<script>
export default {
  props: {
    text: {
      type: String,
      default: 'Click me'
    }
  }
}
</script>

<style scoped>
.my-button {
  background-color: #4CAF50;
  border: none;
  color: white;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  cursor: pointer;
}
</style>

打包后，你会看到一个 style.css 文件，里面包含了 MyButton 组件的样式。

最佳实践：一些小技巧

• 使用 TypeScript： TypeScript 可以提高代码的可维护性和可读性。
• 编写单元测试： 单元测试可以保证组件的质量。
• 使用 Storybook： Storybook 可以帮助你展示和测试组件。
• 发布到 npm： 把你的组件库发布到 npm，让更多的人可以使用它。

常见问题：踩坑指南

• UMD 包无法使用： 确保你在 rollupOptions.output.globals 中正确配置了外部依赖的全局变量。
• 样式没有被提取： 检查你的组件是否使用了 <style scoped> 标签。
• 打包后的文件太大： 尝试开启代码压缩和代码分割。

总结：Vite lib 模式的优势

• 简单易用： Vite 的 lib 模式配置简单，上手容易。
• 快速高效： Vite 使用 esbuild 进行打包，速度非常快。
• 灵活可配置： Vite 提供了丰富的配置选项，可以满足各种需求。

总而言之，Vite 的 lib 模式是打包 Vue 组件库的利器。它可以让你轻松地把你的组件库打包成各种格式，让它能在各种环境下都能愉快地玩耍。希望今天的讲座对你有所帮助！

现在，大家可以开始用 Vite 来打包你们的组件库啦！如果有什么问题，欢迎随时提问。祝大家玩得开心！