rollup 学习笔记

这是一款号称下一代 ES2015 模块打包工具(bundler),通过 Tree-shaking 技术,抽取式打包代码。

概念

先来掌握几个概念,也许你都知道,但是有很多朋友肯定还没搞清楚。
包管理工具(package manager),模块加载器(module loader),模块打包工具(bundler),自动化构建工具(build system)。

包管理工具: npm, cnpm, bower, ied 等。
模块加载器: requirejs, seajs 等。
打包工具: r.js, browserify, webpack, rollup 等。
自动化构建工具: gruntjs, gulpjs, yeoman, fis3, coolie 等。

yeoman/fis3/coolie 其实不单单是自动化构建工具,不过这里不单独介绍了,自己去了解吧。

rollup 是什么鬼?

browserify 想必都熟悉,不过自从 webpack 出来后更是备受关注,甚至不少文章都声称用 webpack 来取代它。
其实我没啥发言权,都只是入门级别简单用用而已,孰好孰坏,孰是孰非,概不做评论。

rollup 这货出了也蛮久了,之前都没怎么用,就简单测试了下,这次倒是花了点时间折腾了下。
原因是因为我看到 vue 用 rollup 打包后比原先 webpack 打包的好了不知道多少倍,至少代码可读可调试了。
之前版本调试是个头疼是事情,虽说底层库不建议在项目里调试,但是偶尔还是需要调试的。

根据官网的解释,rollup.js 是下一代的 JavaScript 模块化工具,使用 ES2015 模块编写你的应用或者库,可以高效的绑定他们成为单个文件,在浏览器或者 Node.js 中使用,甚至是一些高级特性的绑定,比如 bindings 和 cycles。

你可以在他主页 rollup.js 体验下他的神奇之处。

使用 rollup

推荐全局安装,不然不方便 CLI 调用。

1
$ npm install rollup -g

然后跟 webpack 一样,都提供了 CLI 和 API 方式调用。

1
$ rollup src/main.js --output bundle.js --format cjs

CLI 其实没什么好介绍的,直接 rollup --help 就那么几个参数,花几分钟读读就OK了。

一般情况都是需要自定义的,比如打包后压缩,或者加banner注释,或者依赖环境变量构建版本等等。
那么就需要 API 方式调用了。

1
2
3
4
5
6
7
8
9
10
11
var rollup = require( 'rollup' );

rollup.rollup({
entry: 'src/main.js'
}).then( function ( bundle ) {
bundle.write({
// 模块格式 - 'amd', 'cjs', 'es6', 'iife', 'umd'
format: 'cjs',
dest: 'bundle.js'
});
});

或者,你可以自己通过 fs 写到文件。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var fs = require( 'fs' );
var rollup = require( 'rollup' );

rollup.rollup({
entry: 'src/main.js'
}).then( function ( bundle ) {
var result = bundle.generate({
// 模块格式 - 'amd', 'cjs', 'es6', 'iife', 'umd'
format: 'cjs'
});

// 一些自定义处理...

fs.writeFileSync( 'bundle.js', result.code );
});

当然,你可以用 es6 写,如果你配置了 babel 环境的话。

1
2
3
4
5
6
7
8
9
10
11
import { rollup } from 'rollup'

rollup({
entry: 'src/main.js'
}).then( bundle => {
bundle.write({
// 模块格式 - 'amd', 'cjs', 'es6', 'iife', 'umd'
format: 'cjs',
dest: 'bundle.js'
})
})

虽然代码上没多大变化。。不过至少是 es6 的,^_^。

值得注意的是 iife/umd 模式中需要 moduleName 参数。

插件

其实不想提插件的,因为后续操作可以交给 gulp/grunt 处理了。
不过 es6 转 es5 给 gulp/grunt 操作的话,runtime 部分全部跑到公共区域了,甚是蛋疼。。

先看下官网给的插件列表,目前不算多,不过基本够用。

具体才插件使用就不多说了,反正主页上都有例子,直接复制就好了,跟 gulp/grunt 一样无脑使用。

总结

这是个专注 es6 的模块构建工具,如果你打算玩玩 es6 的话,不妨试试。
虽说 webpack2 也准备加入 tree-shaking 技术了,不过就使用上来说,rollup 简单易用,也许没 webpack 强大,但够用就好。

多学点总是好的,技多不压身嘛。