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