Rollup.js 之一：介绍

来源：rollup.js 官网

Rollup 是一个 JavaScript 模块打包器。它使用 ES6 模块语法。

快速入门

使用 npm install --global rollup 安装。执行 rollup --help 可以查看可用的选项和参数。

命令

假如程序入口是 main.js，输出文件是 bundle.js。

对于浏览器环境：

rollup main.js --format iife --output bundle.js

对于 Node.js 环境：

rollup main.js --format cjs --output bundle.js

如果要在两种环境中都适用：

rollup main.js --format umd --name "myBundle" --output bundle.js

Tree Shaking

除了使用 ES6 模块，Rollup 还可以静态分析导入模块，移除没用到的代码。这能尽量减小代码体积。

比如，对于 CommonJS，必须引入整体的工具或库文件：

var utils = require('utils');
var query = 'Rollup';

utils.ajax('https://api.example.com/?search=' + query).then(handleResponse);

如果使用了 ES6 模块，我们可以只导入需要的 ajax 函数：

import {ajax} from 'utils';
var query = 'Rollup';

ajax('https://api.example.com/?search=' + query).then(handleResponse);

兼容性

引入 CommonJS 模块

Rollup 通过插件可以引入已有的 CommonJS 模块。

发布 ES6 模块

为了让你的 ES6 模块在 Node.js, Webpack 等 CommonJS 工具中立即可用，你可以用 Rollup 转译成 UMD 或者 CommonJS 格式，然后在 package.json 文件的 main 属性中指向该编译文件。如果 package.json 文件还包含 module 字段，支持 ES6 的工具，比如Rollup 和 webpack 2，就会直接导入 ES6 版本的模块。

链接

• 手把手的视频教程系列，配有文字步骤注解
• wiki 上有五花八门的问题

下一篇：创建第一个包 bundle