Rollup.js入门指南：高效的ES模块打包工具

掌握rollupjs：从基础到高级

Rollup.js 是一款轻量级的 JavaScript 模块打包器，尤其擅长处理 ES 模块。与Webpack等重量级打包器相比，它配置简单，学习成本低，生成的代码更简洁高效。本文将介绍 Rollup.js 的基本用法，并说明其优势。

一、为什么选择 Rollup.js？

早期浏览器对模块支持不足，大型 Web 项目需要将多个脚本合并成一个。Node.js 的模块机制与浏览器不兼容，必须借助打包工具进行转换。同时，从性能角度出发，浏览器加载一个大脚本比多个小脚本效率更高，减少了 HTTP 请求次数。

Webpack 虽然功能强大，但配置复杂，学习曲线陡峭。Rollup.js 的设计初衷就是提供一个简单易用的 ES 模块打包工具，无需复杂的配置即可上手。虽然它也支持 CommonJS 模块，但配置相对复杂，因此建议仅用于打包 ES 模块以发挥其最大优势。如果您不熟悉 ES 模块和 CommonJS 模块的区别，建议参考相关 ES6 教程。

二、安装和基本使用

全局安装 Rollup.js：

npm install --global rollup

登录后复制

也可以使用 npx rollup 命令，无需全局安装。

查看帮助信息：

rollup --help  # 或 npx rollup --help

登录后复制

三、示例：打包两个简单的脚本

我们将使用 Rollup.js 打包 add.js (库文件) 和 main.js (入口文件)。

add.js:

const pi = 3.14;
const e = 2.718;

export function addpi(x) {
  return x + pi;
}

export function adde(x) {
  return x + e; 
}

登录后复制

main.js:

import { addpi } from './add.js';

console.log(addpi(10));

登录后复制

打包命令：

rollup main.js  # 将结果输出到控制台

登录后复制

或者保存到文件：

rollup main.js --file bundle.js # 将结果保存到 bundle.js

登录后复制

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 模块。