使用vite构建库时如何设置多个输出

在使用 Vite 来构建库时，我们通常需要关注库的输出格式和兼容性问题。Vite 支持构建多种格式的库，主要包括 ESM、CommonJS 等。我们可以通过配置 Vite 的 build 配置选项来设定多个输出。

以下是一个具体的步骤和例子，展示如何使用 Vite 设置一个库的多个输出格式：

步骤 1: 初始化项目

首先，确保你已经安装了 Node.js 和 Vite。然后，运行以下命令来创建一个新的 Vite 项目：

bash
npm create vite@latest my-lib --template vanilla
cd my-lib
npm install

步骤 2: 配置 Vite

在 Vite 配置文件 vite.config.js 中，我们需要对 build 选项进行配置，以指定输出格式。下面是一个配置多个输出格式的示例：

javascript
import { defineConfig } from 'vite';

export default defineConfig({
  build: {
    // 库模式配置
    lib: {
      entry: './src/index.js', // 指定入口文件
      name: 'MyLib', // 库的全局变量名（对于 UMD/IIFE 格式）
      fileName: (format) => `my-lib.${format}.js` // 输出文件名格式
    },
    // 输出格式配置
    rollupOptions: {
      // 确保外部化处理那些你不想打包进库的依赖
      external: ['vue'],
      output: [
        {
          format: 'es', // ESM 格式
          dir: 'dist/es',
          sourcemap: true // 是否生成 sourcemap
        },
        {
          format: 'cjs', // CommonJS 格式
          dir: 'dist/cjs',
          sourcemap: true
        },
        {
          format: 'umd', // UMD 格式
          dir: 'dist/umd',
          sourcemap: true,
          globals: {
            vue: 'Vue'
          }
        }
      ]
    }
  }
});

步骤 3: 构建库

配置完成后，运行以下命令来构建库：

bash
npm run build

这条命令会根据你的配置在 dist 目录下生成多个子目录（es, cjs, umd），每个目录包含对应格式的构建文件。

例子

假设我们的库依赖于 Vue，并且我们希望让用户能够在不同的环境中使用我们的库（例如，通过 ES 模块、CommonJS 或直接在浏览器中通过全局变量）。通过上述配置，我们可以生成三种格式的文件，用户可以根据他们的项目配置选择合适的格式来使用我们的库。

这种方式不仅增加了库的可用性，也提升了其在不同环境下的兼容性。