如果您在使用webpack1.X，您就會知道其無法避免引入冗余模塊代碼，導(dǎo)出打包出來的bundle文件難免有點臃腫。
當(dāng)然，您可以通過ES2015的解構(gòu)賦值語法引入模塊，可以讓打包工具最終編譯出來的代碼盡可能最小化，但是如果您比較習(xí)慣用類似webpack做模塊化打包的話，可能有點折騰。所以，今天和大家介紹一個新的前端模塊化的打包工具Rollup，Rollup在編譯打包模塊過程中，通過Tree-shaking的方式，利用ES6模塊能夠靜態(tài)分析語法樹的特性，剔除各模塊中最終未被引用到的方法，通過僅保留被調(diào)用到的代碼塊來減小bundle文件大小。它和webpack 2.X在一定程度上很相似，孰優(yōu)孰劣，在這我們就不去討論，這篇文章重點是向大家簡單介紹一下Rollup。

使用

通過npm進行安裝

npm install -g rollup

執(zhí)行打包方式和webpack類似：

*******************************************************
將入口文件src/main.js打包輸出-o/--output為rel/bundle.js
*******************************************************
rollup src/main.js -o rel/bundle.js

Rollup打包新增編譯運行格式-f/--format參數(shù)，您通過指定參數(shù)可以編譯出來的模塊執(zhí)行您想要的格式

*****************************************
commonjs
*****************************************
rollup src/main.js -o rel/bundle.js -f cjs

還有其他可選格式：
amd、es6、iife、umd等

來看看官方simple project，帶我們?nèi)腴T
首先，創(chuàng)建例子入口文件

// src/main.js
import { cube } from './maths.js';
console.log( cube( 5 ) );

再搞個maths.js引入文件

// src/maths.js
export function square ( x ) {
    return x * x;
}
export function cube ( x ) {
    return x * x * x;
}

最終得到bundel.js內(nèi)容如下：

'use strict';

function cube ( x ) {
    // rewrite this as `square( x ) * x`
    // and see what happens!
    return x * x * x;
}

console.log( cube( 5 ) );

上面可以看出maths未調(diào)用過的square方法經(jīng)過Tree-shaking的作用后并未在bundel.js里出現(xiàn)。
另外Tree-shaking 會抽取引用到的模塊內(nèi)容，將它們置于同一個作用域下，進而直接用變量名就可以訪問各個模塊的接口。而不像 webpack 這樣每個模塊外還要包一層函數(shù)定義，再通過合并進去的 define/require 相互調(diào)用。當(dāng)然，這種方法需要 ES2015 的解構(gòu)賦值語法來配合，多虧了它，Rollup 才能有效地對模塊內(nèi)容進行可靠的靜態(tài)分析。

Using config files

和webpack一樣，Rollup也支持通過config file 來靈活使用。我們在根目錄下建個rollup.config.js文件：

export default {
  entry: 'src/main.js',
  format: 'cjs',
  dest: 'rel/bundle.js' 
};

在此目錄下執(zhí)行打包：

*****************************************
rollup -c /--config [config filename]
*****************************************
rollup -c

當(dāng)然，它也是支持使用插件的，直接寫到配置文件里plugins里即可：

import babel from 'rollup-plugin-babel';

export default {
  entry: 'src/main.js',
  format: 'cjs',
  plugins: [ babel() ],
  dest: 'rel/bundle.js' 
};

執(zhí)行npm安裝rollup-plugin-babel

npm install rollup-plugin-babel

不過大家要注意的是，Rollup類似babel的預(yù)設(shè)不能像webpack可以直接寫在配置文件里，必須通過.babelrc的configured文件來進行，此文件存放目錄不規(guī)定一定在根目錄下

//src/.babelrc
{
  "presets": [
    ["latest", {
      "es2015": {
        "modules": false
      }
    }]
  ],
  "plugins": ["external-helpers"]
}

并執(zhí)行npm安裝babel-preset-es2015-rollup

npm install babel-preset-es2015-rollup

這樣就可以配合babel一起把es6的模塊編譯為es5的bundle進行使用。
為了方便跟gulp等工具協(xié)作,Rollup也支持被調(diào)用執(zhí)行，比如：

//rollup.config.js
var rollup = require( 'rollup' );
var babel = require('rollup-plugin-babel');

rollup.rollup({
    entry: 'src/main.js',
    plugins: [ babel() ]
}).then( function ( bundle ) {
    bundle.write({
        format: 'umd',
        moduleName: 'main', //umd或iife模式下，若入口文件含 export，必須加上該屬性
        dest: 'rel/bundle.js',
        sourceMap: true  //設(shè)置 source map，會自動生成一個 rel/bundle.js.map 關(guān)聯(lián)到 rel/bundle.js 中。也可以設(shè)置為inline直接內(nèi)聯(lián)在 bundle 里而不是獨立生成一個 map 文件
    });
});

然后node執(zhí)行

node rollup.config.js

注意 “rollup.rollup()”返回一個帶著 bundle 作為 resolve 回調(diào)參數(shù)的 Promise 對象，我們常規(guī)直接使用語法糖 bundle.write 來打包輸出文件：

bundle.write({
     format: 'umd',
     moduleName: 'main',
     dest: 'rel/bundle.js'
});

//其等價于
var result = bundle.generate({
    format: 'umd',
    moduleName: 'main',
    dest: 'rel/bundle.js',
  });

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

Rollup簡單的介紹就到這，Rollup的出現(xiàn)也有一段時間了，如果您對它感興趣的話可以去了解和使用，前端這些年出現(xiàn)的利器不少，它之所以沒紅起來，我想有個很大的原因就是前端生出利器時間過短，人們沒反應(yīng)過來。所以，要當(dāng)好一個前端就得加快學(xué)習(xí)的腳本，共勉！