Rollup.js入门指南：高效的ES模块打包工具
Rollup.js 是一款轻量级的 JavaScript 模块打包器，尤其擅长处理 ES 模块。与Webpack等重量级打包器相比，它配置简单，学习成本低，生成的代码更简洁高效。本文将介绍 Rollup.js 的基本用法，并说明其优势。
一、为什么选择 Rollup.js？
早期浏览器对模块支持不足，大型 Web 项目需要将多个脚本合并成一个。Node.js 的模块机制与浏览器不兼容，必须借助打包工具进行转换。同时，从性能角度出发，浏览器加载一个大脚本比多个小脚本效率更高，减少了 HTTP 请求次数。
Webpack 虽然功能强大，但配置复杂，学习曲线陡峭。Rollup.js 的设计初衷就是提供一个简单易用的 ES 模块打包工具，无需复杂的配置即可上手。虽然它也支持 CommonJS 模块，但配置相对复杂，因此建议仅用于打包 ES 模块以发挥其最大优势。如果您不熟悉 ES 模块和 CommonJS 模块的区别，建议参考相关 ES6 教程。
二、安装和基本使用
全局安装 Rollup.js：
<code class="bash">npm install --global rollup</code>
也可以使用 npx rollup 命令，无需全局安装。
查看帮助信息：
<code class="bash">rollup --help # 或 npx rollup --help</code>
三、示例：打包两个简单的脚本
我们将使用 Rollup.js 打包 add.js (库文件) 和 main.js (入口文件)。
add.js:
<code class="javascript">const pi = 3.14;
const e = 2.718;
export function addpi(x) {
return x + pi;
}
export function adde(x) {
return x + e;
}</code>
main.js:
<code class="javascript">import { addpi } from './add.js';
console.log(addpi(10));</code>
打包命令：
<code class="bash">rollup main.js # 将结果输出到控制台</code>
或者保存到文件：
<code class="bash">rollup main.js --file bundle.js # 将结果保存到 bundle.js</code>
Rollup.js 会自动处理依赖，并进行树状摇动 (Tree-shaking)，移除未使用的代码，生成更小巧的代码。
四、高级用法和注意事项
-
多个入口文件: 使用
--dir参数指定输出目录，例如rollup m1.js m2.js --dir dist。 -
IIFE 包装: 使用
--format iife参数将代码包装成立即执行函数表达式 (IIFE)。 -
代码压缩: 使用
--compact参数进行代码压缩，或者使用uglifyjs等工具进行更高级的压缩。例如：rollup main.js | uglifyjs --output bundle.js -
配置文件: Rollup.js 支持配置文件 (rollup.config.js)，但为了简便，命令行参数通常就足够了。
-
CommonJS 模块转换: 使用
--format cjs参数将 ES 模块转换为 CommonJS 模块。
五、推荐部署平台：Leapcell
最后，推荐一个用于部署 JavaScript 项目的平台：Leapcell。
Leapcell 的优势：
- 支持多种编程语言 (JavaScript, Python, Go, Rust)。
- 免费部署无限项目。
- 按需付费，没有闲置费用。
- 简洁易用的用户界面，自动 CI/CD 管道和 GitOps 集成。
- 强大的可扩展性和高性能。
了解更多信息，请访问 Leapcell 官网和 Twitter。
希望本文能帮助您快速上手 Rollup.js，并选择合适的部署平台。
