Rollup 是一個(gè) JavaScript 模塊打包器。它使用 ES6 模塊語法。
快速入門
使用 npm install --global rollup 安裝。執(zhí)行 rollup --help 可以查看可用的選項(xiàng)和參數(shù)。
命令
假如程序入口是 main.js，輸出文件是 bundle.js。
對(duì)于瀏覽器環(huán)境：
rollup main.js --format iife --output bundle.js
對(duì)于 Node.js 環(huán)境：
rollup main.js --format cjs --output bundle.js
如果要在兩種環(huán)境中都適用：
rollup main.js --format umd --name "myBundle" --output bundle.js
Tree Shaking
除了使用 ES6 模塊，Rollup 還可以靜態(tài)分析導(dǎo)入模塊，移除沒用到的代碼。這能盡量減小代碼體積。
比如，對(duì)于 CommonJS，必須引入整體的工具或庫文件：
var utils = require('utils');
var query = 'Rollup';
utils.ajax('https://api.example.com/?search=' + query).then(handleResponse);
如果使用了 ES6 模塊，我們可以只導(dǎo)入需要的 ajax 函數(shù)：
import {ajax} from 'utils';
var query = 'Rollup';
ajax('https://api.example.com/?search=' + query).then(handleResponse);
兼容性
引入 CommonJS 模塊
Rollup 通過插件可以引入已有的 CommonJS 模塊。
發(fā)布 ES6 模塊
為了讓你的 ES6 模塊在 Node.js, Webpack 等 CommonJS 工具中立即可用，你可以用 Rollup 轉(zhuǎn)譯成 UMD 或者 CommonJS 格式，然后在 package.json 文件的 main 屬性中指向該編譯文件。如果 package.json 文件還包含 module 字段，支持 ES6 的工具，比如Rollup 和 webpack 2，就會(huì)直接導(dǎo)入 ES6 版本的模塊。
