使用 vite 构建库模式需要修改 `vite.config.js`，将 build.lib 配置项指向入口文件并指定输出格式，同时设置 build.outdir 为 dist。这样执行 vite build 后，vite 会自动生成包含 commonjs、es module 和 umd 格式的打包文件，方便在 node.js 或浏览器环境中直接引用。
如何配置 vite.config.js 以支持多格式输出
在 vite.config.js 中，核心配置是 build.lib 对象。你需要指定 entry 作为入口文件路径，并通过 formats 数组定义输出的模块格式，通常包括 'es'、'cjs' 和 'umd'。此外，必须显式设置 build.outDir 为 'dist'，因为库模式的默认输出目录与应用程序不同。配置完成后，运行构建命令即可生成对应的文件。
// vite.config.js
import { defineConfig } from 'vite';
import path from 'path';
export default defineConfig({
build: {
lib: {
entry: path.resolve(__dirname, 'src/index.js'),
name: 'MyLibrary',
formats: ['es', 'cjs', 'umd'],
},
outDir: 'dist',
},
});
上述代码定义了入口为 src/index.js，库的全局名称为 MyLibrary（用于 UMD 格式）。构建后，dist 目录下会生成 my-library.es.js、my-library.cjs.js 和 my-library.umd.js。这些文件分别对应 ES Module、CommonJS 和 UMD 标准，开发者可根据目标环境选择合适的引入方式。
立即学习“Java免费学习笔记（深入）”；
如何处理外部依赖以避免重复打包
在构建库时，通常不希望将 React、Vue 等大型框架或工具库打包进最终产物，而是希望它们作为外部依赖由使用者提供。这可以通过 build.rollupOptions.external 配置来实现。将该数组设置为需要排除的包名列表，Vite 会在打包时保留对这些包的 import 语句，而不将其内容内联到 bundle 中。这样可以显著减小库文件的体积，并确保使用者使用的是他们自己安装的版本。
// vite.config.js
import { defineConfig } from 'vite';
import path from 'path';
export default defineConfig({
build: {
lib: {
entry: path.resolve(__dirname, 'src/index.js'),
name: 'MyLibrary',
formats: ['es', 'cjs', 'umd'],
},
outDir: 'dist',
rollupOptions: {
external: ['react', 'react-dom'],
},
},
});
当 external 配置了 ['react', 'react-dom'] 后，生成的 my-library.es.js 中将保留 import { useState } from 'react' 这样的语句，而不是将 React 源码打包进去。对于 UMD 格式，Vite 会自动将这些外部依赖映射到全局变量，例如 window.React。这种配置确保了库的轻量级和灵活性，避免了版本冲突问题。
UMD 格式下的全局变量命名规则是什么
在 UMD 格式的输出文件中，库会通过一个全局变量暴露其 API。这个变量的名称由 vite.config.js 中 build.lib.name 属性决定。例如，如果 name 设置为 'MyLibrary'，那么在浏览器中可以通过 window.MyLibrary 访问库中的导出内容。如果未指定 name，Vite 会根据文件名自动生成一个驼峰命名的全局变量，但显式指定可以确保命名的一致性和可读性。
