使用rollup構建你的JavaScript項目【一】

什麼是Rollup?

前端項目工程化構建工具也發展好幾年了，生態演化，慢慢發展出了不少好的構建項目的工具，從最開始的grunt,gulp到webpack，前端的工程化愈來愈方便，給前端帶到了一個美好的時代。

目前，社區中比較火的一個構建工具，是rollup，用rollup來打包模塊化的JavaScript代碼很是的便利。它使用ES6中的新的語法標準來打包模塊化的代碼，將代碼拆分紅多個小的模塊化的代碼片斷，很是適合JavaScript類庫，插件，和應用的開發。還有一個優勢（Tree Shaking），就是rollup能夠按需打包代碼，對於系統中引入了可是沒有使用的代碼，不會打包到最終文件中。

rollup快速入口：官網、GitHub

快速開始

開始以前，須要作一些準備：

1. 安裝了nodejs和npm（或者你也能夠使用yarn）

2. 瞭解ES6中modules的概念

3. 熟練使用命令行工具

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

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

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

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

使用命令行

假設你要打包的入口文件是main.js，想要把main.js裏引入的全部文件都打包成bundle.js。

Rollup提供了多種打包方式，經過format屬性能夠設置你想要打包成的代碼類型：

• amd - 輸出成AMD模塊規則，RequireJS能夠用

• cjs - CommonJS規則，適合Node，Browserify，Webpack 等

• es - 默認值，不改變代碼

• iife - 輸出自執行函數，最適合導入html中的script標籤，且代碼更小

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

根據使用場景，配置不一樣的format屬性來打包文件。

瀏覽器使用：

# 編譯成一個自執行函數，能夠直接在 html 中的 script 標籤直接引入
$ rollup main.js --format iife --output bundle.js

Nodejs使用：

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

瀏覽器和Nodejs通用：

# UMD 模式須要設置一個大報名
$ rollup main.js --format umd --name "myBundle" --output bundle.js

使用配置文件，來rollup一個項目

開始以前，先在本地建立一個項目，並在根目錄經過 npm init 建立一個package.json文件，構建一個用npm來管理依賴的項目。

將rollup安裝到項目本地：

npm i --save-dev rollup   //--save-dev表示將rollup安裝到開發環境依賴中

建立 rollup.config.js

在項目根目錄下建立rollup的配置文件，以下：

// rollup.config.js
export default {
  entry: 'src/main.js',   //打包入口文件
  format: 'iife',         //iife模式，適用於瀏覽器
  sourceMap: true,        //啓用sourcemap
  dest: 'dist/bundle.js'  //等價於 --output，打包目標文件
};

建立文件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參數全稱是 --config，表示使用配置文件
  }
}

自定義使用rollup配置文件

上面的build命令：rollup -c 會默認使用項目根目錄下的 rollup.config.js 做爲項目的rollup配置文件。若是你想自定義使用其餘文件做爲配置文件，能夠經過參數來指定文件。當對一個應用系統針對不一樣環境配置多個配置文件的時候特別適用。以下，對開發環境和生產環境分別使用兩套配置文件進行項目的配置。

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

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

build項目

配置好上面的內容，就能夠開始對 src/main.js 進行打包了。

在命令行中，項目根目錄下，執行命令：

npm run build

執行完以後，會看到項目根目錄下，生成了一個新的目錄：dist。在 dist目錄下，有兩個文件，分別是打包以後的js文件：bundle.js 和 bundle.js對應的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 打包成了一個新的js文件，並給它套上了一個自執行函數，文件最後有對應的map文件映射聲明。

添加babel

在上一步中，能夠看到rollup將代碼很好的進行了打包處理。可是，咱們在main.js中用的是ES6的語法，打包以後仍是ES6的語法，因爲目前瀏覽器還不能很好的兼容ES6中的語法，因此，要想讓咱們的代碼在瀏覽器中完美的運行，須要使用babel將ES6的語法轉換成ES5的語法。

爲了能很好的建立大型應用，拓展第三方插件等，rollup提供了對第三方插件的支持，在配置文件中添加plugins來實現插件的引入。

要添加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

在項目的根目錄下建立babe的配置文件 .babelrc：

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

準備好上述內容，就查最後一步，引入babel轉換器了。修改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/**'
        })
    ]
}

修改好配置文件以後，執行一次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中已是轉換成ES5以後的代碼了。

更多的插件

在開發項目的過程當中，須要引入一個json文件，能夠引入插件rollup-plugin-json：

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

更新rollup配置文件：

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

若是你想要在項目中引入外部模塊，你須要rollup-plugin-node-resolve：

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

更新rollup配置文件：

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

rollup-plugin-commonjs

一些類庫導出的是ES6語法的代碼，可是在npm上大部分模塊都是以CommonJS模式輸入模塊，因此在rollup上處理這些模塊以前，咱們須要將代碼從CommonJS轉換成ES6。

這個時候，就須要安裝插件rollup-plugin-commonjs。

須要注意的是，爲了不這種轉換破壞代碼結構，rollup-plugin-commonjs的須要在其餘插件以前執行。

rollup-plugin-uglify

要想讓打包的文件更小，還須要一個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上，點我查看

（待續。。。）

//TODO 
* 使用rollup引入同級依賴類庫
* vue項目開發環境配置
* react開發環境配置