DEV Community
·
掌握 Rollup.js：从基础到高级
💡
原文英文，约1200词，阅读约需5分钟。
📝
内容提要
Rollup.js 是一个简化 ES 模块打包的 JavaScript 工具，通过将多个脚本合并为一个，提升浏览器加载性能。与 Webpack 相比，Rollup.js 配置简单，适合 ES 模块，但对 CommonJS 模块支持较弱。支持命令行打包、代码最小化和配置文件。
🎯
关键要点
- Rollup.js 是一个简化 ES 模块打包的 JavaScript 工具，提升浏览器加载性能。
- 与 Webpack 相比，Rollup.js 配置简单，适合 ES 模块，但对 CommonJS 模块支持较弱。
- 打包工具的作用包括解决早期浏览器模块支持问题、模块机制兼容性和性能优化。
- Rollup.js 适合直接使用 ES 模块，复杂配置时不如 Webpack 简单。
- Rollup.js 可以全局安装，也可以使用 npx 直接运行。
- 使用 Rollup.js 打包时，只需指定入口脚本，自动处理依赖关系。
- Rollup.js 支持 tree-shaking，自动删除未使用的代码，输出结果更简洁。
- 可以使用 --file 参数将打包结果保存到指定文件。
- 支持多个入口脚本的打包，使用 --dir 参数指定输出目录。
- 可以使用 --format iife 参数将结果放入立即调用函数表达式中。
- 使用 --compact 参数可以对打包后的代码进行最小化处理。
- Rollup 支持配置文件，但推荐使用命令行参数以简化操作。
- Rollup 还支持将 ES 模块转换为 CommonJS 模块，使用 --format cjs 参数。
- 推荐使用 Leapcell 平台进行 JavaScript 项目的部署，支持多语言和无限项目免费部署。
❓
延伸问答
Rollup.js 的主要功能是什么？
Rollup.js 是一个 JavaScript 打包工具，主要用于简化 ES 模块的打包，提升浏览器加载性能。
Rollup.js 与 Webpack 有什么区别？
Rollup.js 配置简单，适合 ES 模块，而 Webpack 功能强大但配置复杂，学习成本高。
如何使用 Rollup.js 打包多个入口脚本？
使用命令 $ rollup m1.js m2.js --dir dist 可以将多个入口脚本打包并生成文件到指定目录。
Rollup.js 支持哪些代码优化功能？
Rollup.js 支持 tree-shaking 自动删除未使用的代码，并可以使用 --compact 参数进行代码最小化处理。
如何将 ES 模块转换为 CommonJS 模块？
使用参数 --format cjs 可以将 ES 模块转换为 CommonJS 模块，命令为 $ rollup add.js --format cjs。
Rollup.js 的安装方式有哪些？
Rollup.js 可以全局安装，也可以使用 npx 直接运行，无需安装。
➡️
