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 方式调用了。

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 写到文件。

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 环境的话。

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 强大，但够用就好。

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