Rollup 试炼之路

最近看到挺多次 Rollup 这个词，再也架不住好奇，简单的学习实践了一下。完整项目库地址请戳。

PS: ES6 对应 ES2015，请忽略这些细节。

什么是 Rollup

Rollup Github 地址。根据官网的解释，Rollup 是下一代 ES6 模块化工具。ES6 之后，模块化的写法将更加的趋势化，我们会将以前的文件切割成多个的细小模块。那么如何来高效的组织管理这些文件，又有了很多不同的方案。现有的模块化打包已经有如
Browserify 和 Webpack ，那为啥还需要一个新的呢？

优势在哪

• 可以生成 AMD，CMD，UMD 甚至 ES6 模块文件。

• Tree-shaking

tree-shaking(有知道中文怎么翻译的同学欢迎留言告知一下)，大致意思就是打包的时候会移除未使用到的 ES6 exports模块。想要更深入的了解 tree-shaking 的话，可以看下博士的这篇文章Tree-shaking with webpack 2 and Babel 6。

话题转回来，Rollup 正是使用了 ES6 的模块特性，所以会使打包后的文件体积更小。如果是 CommonJS 的则需要先通过插件转为 ES6 后处理。

对了，值得多说一句的是，Rollup 打包后的代码没有 require，import的，而是直接插入到文件中。

如何引用

Rollup 支持 CLI 和 JS API 方式，同时提供了一些插件如解决压缩 babel 转换等问题。(PS: 此处讲解采用 API 的方式)

首先在项目根目录创建 rollup.js 文件，安装 npm 的相关依赖

var rollup = require('rollup');
var babel = require('rollup-plugin-babel');
var uglify = require('rollup-plugin-uglify');

rollup.rollup({
    entry: 'src/index.js',
    plugins: [
        babel({
            exclude: 'node_modules/**',
            presets: [ "es2015-rollup" ]
        }),
        uglify()
    ]
}).then(function(bundle) {
    bundle.write({
        // output format - 'amd', 'cjs', 'es6', 'iife', 'umd'
        format: 'umd',
        moduleName: 'dqSystem',
        sourceMap: true,
        dest: 'dqSystem.js'
    });
});

rollup 方法可以配置一些入口文件，依赖插件等，返回的是 bundle 的 Promise 方法。bundle 方法中可以配置文件相关参数，同时也可以生成多份版本文件。具体的 API 参考官网

使用 node rollup.js 执行打包。另外 Rollup 好像还不支持 watch 的配置，我采用了 npm-watch 的方式跳过了。

采过的坑

试用时间不长，且内容比较简单，可能没碰到一些奇怪的点

• Rollup.js 中可以 catch 下 error 方便调试错误

• UMD/IIFE 模式中需要moduleName

• Rollup 的模块引用只支持 ES6 Module，其他的需要采用 npm 和 commonjs 的插件去解决

自己YY下

不知道拿 Rollup 和 webpack 相比合不合适。我个人还是挺喜欢 webpack 的打包方式的，关键是功能强大，不过相比，配置也巨复杂。而 Rollup 的配置就简单很多了。实验的项目文件不大，所以没看出来两者在压缩体积上是否有明显的差异。Rollup 的tree-shaking也将会在 webpack2 中支持。所以好像并没有什么一定非它不可的感觉。

套用朋友说的一句话，“任何产品的生命周期都得看社区的活跃程度”。从 github 的 fock 人数上，还是持有很大的保留意见的，所有我个人可能会在一些小型或者快速项目中做尝试而已。

参考文章

• Rollup Github

• Tree-shaking with webpack 2 and Babel 6