什么是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开辟环境设置