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'
});
});</pre>
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 人數上，還是持有很大的保留意見的，所有我個人可能會在一些小型或者快速項目中做嘗試而已。