Vite将lib仓库打包为一个JavaScript文件
💡
原文中文，约6500字，阅读约需16分钟。
📝
内容提要
本文介绍了如何将Vite项目中的lib库房打包为一个JavaScript文件。首先合并node_modules，然后修正Vite装备，只生成ESM和CommonJS两种文件。接着合并style.css，使用插件进行样式注入。最后修正package.json中的装备。
🎯
关键要点
- 介绍如何将Vite项目中的lib库打包为一个JavaScript文件。
- 需求是将多个文件合并为一个ESM文件。
- Vite项目的配置文件vite.config.ts示例。
- 打包后的dist目录包含多个文件，包括UMD和ESM格式。
- UMD（通用模块定义）是一种JavaScript模块定义规范，兼容多种模块加载器。
- ESM（ECMAScript模块）是现代JavaScript的模块系统。
- 合并node_modules中的文件需要在rollupOptions中配置manualChunks。
- 解决manualChunks与inlineDynamicImports冲突的问题。
- 通过添加formats选项只生成ESM和CommonJS文件。
- 合并vendor文件以生成一个主JS文件。
- 使用插件将style.css注入到JS中，简化用户引入样式的过程。
- 修正package.json中的文件名以匹配新的打包输出。
- 总结了整个打包过程和代码示例，强调了配置的重要性。
❓
延伸问答
如何将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。
🏷️
标签
➡️
