摘要：瀏覽器使用編譯成一個(gè)自執(zhí)行函數(shù)，可以直接在中的標(biāo)簽直接引入使用編譯成模塊瀏覽器和通用模式需要設(shè)置一個(gè)大報(bào)名使用配置文件，來一個(gè)項(xiàng)目開始之前，先在本地創(chuàng)建一個(gè)項(xiàng)目，并在根目錄通過創(chuàng)建一個(gè)文件，構(gòu)建一個(gè)用來管理依賴的項(xiàng)目。

前端項(xiàng)目工程化構(gòu)建工具也發(fā)展好幾年了，生態(tài)演化，慢慢發(fā)展出了很多好的構(gòu)建項(xiàng)目的工具，從最開始的grunt,gulp到webpack，前端的工程化越來越方便，給前端帶到了一個(gè)美好的時(shí)代。

目前，社區(qū)中比較火的一個(gè)構(gòu)建工具，是rollup，用rollup來打包模塊化的JavaScript代碼非常的便利。它使用ES6中的新的語法標(biāo)準(zhǔn)來打包模塊化的代碼，將代碼拆分成多個(gè)小的模塊化的代碼片段，非常適合JavaScript類庫，插件，和應(yīng)用的開發(fā)。還有一個(gè)優(yōu)點(diǎn)（Tree Shaking），就是rollup可以按需打包代碼，對于系統(tǒng)中引入了但是沒有使用的代碼，不會(huì)打包到最終文件中。

rollup快速入口：官網(wǎng)、GitHub

開始之前，需要做一些準(zhǔn)備：

安裝了nodejs和npm（或者你也可以使用yarn）

了解ES6中modules的概念

熟練使用命令行工具

熟悉gulp,webpack（不熟悉也無妨）

首先，需要把rollup安裝到全局空間：

 npm install --global rollup  （或者使用縮寫：npm i -g rollup）

全局安裝rollup之后，就可以使用配置文件的命令行接口或者使用JavaScript API接口來打包JavaScript代碼。

假設(shè)你要打包的入口文件是main.js，想要把main.js里引入的所有文件都打包成bundle.js。

Rollup提供了多種打包方式，通過format屬性可以設(shè)置你想要打包成的代碼類型：

amd - 輸出成AMD模塊規(guī)則，RequireJS可以用

cjs - CommonJS規(guī)則，適合Node，Browserify，Webpack 等

es - 默認(rèn)值，不改變代碼

iife - 輸出自執(zhí)行函數(shù)，最適合導(dǎo)入html中的script標(biāo)簽，且代碼更小

umd - 通用模式，amd,cjs,iife都能用

根據(jù)使用場景，配置不同的format屬性來打包文件。

瀏覽器使用：

# 編譯成一個(gè)自執(zhí)行函數(shù)，可以直接在 html 中的 script 標(biāo)簽直接引入
$ rollup main.js --format iife --output bundle.js

Nodejs使用：

# 編譯成 CommonJS 模塊
$ rollup main.js --format cjs --output bundle.js

瀏覽器和Nodejs通用：

# UMD 模式需要設(shè)置一個(gè)大報(bào)名
$ rollup main.js --format umd --name "myBundle" --output bundle.js

開始之前，先在本地創(chuàng)建一個(gè)項(xiàng)目，并在根目錄通過 npm init 創(chuàng)建一個(gè)package.json文件，構(gòu)建一個(gè)用npm來管理依賴的項(xiàng)目。

將rollup安裝到項(xiàng)目本地：

npm i --save-dev rollup   //--save-dev表示將rollup安裝到開發(fā)環(huán)境依賴中

在項(xiàng)目根目錄下創(chuàng)建rollup的配置文件，如下：

// rollup.config.js
export default {
  entry: "src/main.js",   //打包入口文件
  format: "iife",         //iife模式，適用于瀏覽器
  sourceMap: true,        //啟用sourcemap
  dest: "dist/bundle.js"  //等價(jià)于 --output，打包目標(biāo)文件
};

創(chuàng)建文件src/main.js，編寫入口文件，文件中使用了ES6中的class語法。

//src/main.js

class Customer {
    constructor(name) {
        this.name = name;
    }

    sayHi() {
        console.log(`The name is: ${this.name}`)
        console.info(`foo"s Uppercase: ${_.upperCase("foo")}`)
    }
}

let kevin = new Customer("kevin");

kevin.sayHi();

配置package.json的scripts

{
  "scripts": {
    "build": "rollup -c" //-c參數(shù)全稱是 --config，表示使用配置文件
  }
}

自定義使用rollup配置文件

上面的build命令：rollup -c 會(huì)默認(rèn)使用項(xiàng)目根目錄下的 rollup.config.js 作為項(xiàng)目的rollup配置文件。如果你想自定義使用其他文件作為配置文件，可以通過參數(shù)來指定文件。當(dāng)對一個(gè)應(yīng)用系統(tǒng)針對不同環(huán)境配置多個(gè)配置文件的時(shí)候特別適用。如下，對開發(fā)環(huán)境和生產(chǎn)環(huán)境分別使用兩套配置文件進(jìn)行項(xiàng)目的配置。

rollup --config rollup.config.dev.js
rollup --config rollup.config.prod.js

//或者，使用簡寫
rollup -c rollup.config.dev.js
rollup -c rollup.config.prod.js

配置好上面的內(nèi)容，就可以開始對 src/main.js 進(jìn)行打包了。

在命令行中，項(xiàng)目根目錄下，執(zhí)行命令：

npm run build

執(zhí)行完之后，會(huì)看到項(xiàng)目根目錄下，生成了一個(gè)新的目錄：dist。在 dist目錄下，有兩個(gè)文件，分別是打包之后的js文件：bundle.js 和 bundle.js對應(yīng)的map文件：bundle.js.map。

打開bundle.js文件，看到代碼如下：

(function () {
"use strict";

class Customer {
    constructor(name) {
        this.name = name;
    }

    sayHi() {
        console.log(`The name is: ${this.name}`);
    }
}

let kevin = new Customer("kevin");

kevin.sayHi();

}());
//# sourceMappingURL=bundle.js.map

可以看到，rollup將我們的 src/main.js 打包成了一個(gè)新的js文件，并給它套上了一個(gè)自執(zhí)行函數(shù)，文件最后有對應(yīng)的map文件映射聲明。

在上一步中，可以看到rollup將代碼很好的進(jìn)行了打包處理。但是，我們在main.js中用的是ES6的語法，打包之后還是ES6的語法，由于目前瀏覽器還不能很好的兼容ES6中的語法，所以，要想讓我們的代碼在瀏覽器中完美的運(yùn)行，需要使用babel將ES6的語法轉(zhuǎn)換成ES5的語法。

為了能很好的創(chuàng)建大型應(yīng)用，拓展第三方插件等，rollup提供了對第三方插件的支持，在配置文件中添加plugins來實(shí)現(xiàn)插件的引入。

要添加babel，需要引入插件 rollup-plugin-babel，使用npm來安裝：

npm i -D rollup-plugin-babel --save-dev

除了babel插件，還需要安裝ES6的語法插件 babel-preset-es2015-rollup：

npm i -D babel-preset-es2015-rollup --save-dev

在項(xiàng)目的根目錄下創(chuàng)建babe的配置文件 .babelrc：

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

準(zhǔn)備好上述內(nèi)容，就查最后一步，引入babel轉(zhuǎn)換器了。修改rollup的配置文件如下：

import babel from "rollup-plugin-babel";

export default {
    entry: "src/main.js",
    format: "iife",
    dest: "dist/bundle.js",
    sourceMap: true,
    plugins: [
        babel({
          exclude: "node_modules/**"
        })
    ]
}

修改好配置文件之后，執(zhí)行一次npm run build，再重新查看dist/bundle.js：

(function () {
"use strict";

var classCallCheck = function (instance, Constructor) {
  if (!(instance instanceof Constructor)) {
    throw new TypeError("Cannot call a class as a function");
  }
};

var createClass = function () {
  function defineProperties(target, props) {
    for (var i = 0; i < props.length; i++) {
      var descriptor = props[i];
      descriptor.enumerable = descriptor.enumerable || false;
      descriptor.configurable = true;
      if ("value" in descriptor) descriptor.writable = true;
      Object.defineProperty(target, descriptor.key, descriptor);
    }
  }

  return function (Constructor, protoProps, staticProps) {
    if (protoProps) defineProperties(Constructor.prototype, protoProps);
    if (staticProps) defineProperties(Constructor, staticProps);
    return Constructor;
  };
}();

var Customer = function () {
    function Customer(name) {
        classCallCheck(this, Customer);

        this.name = name;
    }

    createClass(Customer, [{
        key: "sayHi",
        value: function sayHi() {
            console.log("The name is: " + this.name);
        }
    }]);
    return Customer;
}();

var kevin = new Customer("kevin");

kevin.sayHi();

}());
//# sourceMappingURL=bundle.js.map

可以看到，bundle.js中已經(jīng)是轉(zhuǎn)換成ES5之后的代碼了。

npm i --save-dev rollup-plugin-json

更新rollup配置文件：

    import json from "rollup-plugin-json";
    
    //更新`plugins`屬性
    plugins: [
        babel({
          exclude: "node_modules/**"
        }),
        json()
    ]

npm install --save-dev rollup-plugin-node-resolve

更新rollup配置文件：

    //引入插件
    import resolve from "rollup-plugin-node-resolve";
    
    //更新`plugins`屬性
    plugins: [
        resolve()，
        babel({
          exclude: "node_modules/**"
        }),
        json()
    ]

一些類庫導(dǎo)出的是ES6語法的代碼，但是在npm上大部分模塊都是以CommonJS模式輸入模塊，所以在rollup上處理這些模塊之前，我們需要將代碼從CommonJS轉(zhuǎn)換成ES6。

這個(gè)時(shí)候，就需要安裝插件rollup-plugin-commonjs。

需要注意的是，為了避免這種轉(zhuǎn)換破壞代碼結(jié)構(gòu)，rollup-plugin-commonjs的需要在其他插件之前執(zhí)行。

要想讓打包的文件更小，還需要一個(gè)uglify插件：rollup-plugin-uglify。

npm install --save-dev rollup-plugin-uglify

更新rollup配置文件：

    //引入插件
    import uglify from "rollup-plugin-uglify";
    
    //更新`plugins`屬性
    plugins: [
        resolve()，
        babel({
          exclude: "node_modules/**"
        }),
        json(),
        uglify()
    ]

本次配置示例代碼已放在GitHub上，點(diǎn)我查看

（待續(xù)。。。）

//TODO 
* 使用rollup引入同級(jí)依賴類庫
* vue項(xiàng)目開發(fā)環(huán)境配置
* react開發(fā)環(huán)境配置