来源: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 版本的模块。
链接
下一篇:创建第一个包 bundle