Vite将lib仓库打包为一个JavaScript文件
内容提要
本文介绍了如何将Vite项目中的lib库房打包为一个JavaScript文件。首先合并node_modules，然后修正Vite装备，只生成ESM和CommonJS两种文件。接着合并style.css，使用插件进行样式注入。最后修正package.json中的装备。
延伸解读
UMD 与 ESM 的取舍
文章指出，Vite 库模式默认会生成 UMD 格式，但 UMD 是 ESM 出现前的产物，无法兼容 ESM。若需求是提供 ESM 文件，UMD 反而会带来限制，例如其内部启用的 inlineDynamicImports 会与 manualChunks 冲突。因此，明确目标模块格式是打包前的重要决策，直接配置 formats 为 ['es', 'cjs'] 可避免 UMD 带来的额外约束。
合并 node_modules 的配置要点
默认情况下，node_modules 中的依赖会被拆分成多个文件。文章通过 manualChunks 将 node_modules 统一归入 vendor，但随后遇到与 inlineDynamicImports 的冲突。解决方式是移除 UMD 格式，仅保留 ESM 和 CommonJS。之后进一步去掉 manualChunks 中的 vendor 返回，即可将所有代码合并为单个 JS 文件。这提示我们，分包策略需与输出格式协同考虑。
CSS 注入的两种实现路径
文章对比了两种将样式合并进 JS 的方法。一是使用 vite-plugin-css-injected-by-js 插件，它会在运行时向 document.head 注入 style 标签，适合直接引入 JS 的场景。二是在 rollupOptions.output 中配置 intro: 'import "./style.css";'，生成静态导入语句，但要求 JS 被 Vite 或 Webpack 等打包工具处理，否则浏览器会因 MIME 类型报错。选择取决于使用环境。
文件名变更后的必要检查
调整 fileName 配置后，打包产物的名称会改变，例如从 property.js 变为 property.es.js。文章提醒，必须同步更新 package.json 中的 main、module 以及 exports 字段，确保入口指向正确的文件。否则，即使打包成功，其他项目在引用该库时也可能因路径错误而无法加载。这是发布前容易被忽略但影响直接的一步。
Q&A
如何将Vite项目中的lib库打包为一个JavaScript文件？
通过合并node_modules，修正Vite配置，生成ESM和CommonJS文件，并使用插件注入样式。
什么是UMD和ESM，它们有什么区别？
UMD是通用模块定义，兼容多种模块加载器；ESM是现代JavaScript的模块系统，二者不兼容。
如何解决manualChunks与inlineDynamicImports的冲突？
通过替换Vite的默认选项，添加formats选项，只生成ESM和CommonJS文件。
如何合并style.css到打包的JavaScript文件中？
使用vite-plugin-css-injected-by-js插件，可以将style.css注入到生成的JS中。
在打包后如何修正package.json文件？
需要更新main和module字段，确保它们指向新的打包输出文件。
Vite项目的配置文件vite.config.ts应该如何设置？
配置lib的entry、name、formats等选项，并在rollupOptions中设置manualChunks。
