一、为什么选用rollup

roll-up是下一代JavaScript模块打包工具。开发者可以在你的应用或库中使用ES2015模块，然后高效地将它们打包成一个单一文件用于浏览器和Node.js使用。 Rollup最令人激动的地方，就是能让打包文件体积很小。这么说很难理解，更详细的解释：相比其他JavaScript打包工具，Rollup总能打出更小，更快的包。因为Rollup基于ES2015模块，比Webpack和Browserify使用的CommonJS模块机制更高效。两者相比，就打包出来的文件可读性就完全不一样。

Webpack是一个面向多种文件类型的复杂的应用打包工具。各种文件类型，只要配置了loader，即可以进行自定义的加载，将所有的文件打包成应用。

我们这里是要进行类库的打包，即只打包一堆class，所以我们选用roll-up。文末会附上github源码。

二、项目结构

|--build
   rollup.config.dev.js
|--src
  |--classes
    Animal.js
    Cat.js
    Dog.js
    PoodleDog.js
  index.js
 package.json

对，我们用最简单的代码实现打包功能。

1 rollup配置文件

首先看package.json。只需要配置一个roolup.config.dev.js即可以实现配置。寻找build下的roolup.config.dev.js.

package.json

 "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "rollup -c ./build/rollup.config.dev.js"
  },

roolup.config.dev.js

import babel from 'rollup-plugin-babel';
import resolve from 'rollup-plugin-node-resolve';
import commonjs from 'rollup-plugin-commonjs';
import json from 'rollup-plugin-json';

export default {
    entry: 'src/index.js',
    moduleName: 'Animals',
    format: 'umd',
    dest: 'dist/animals.js',
    plugins: [
        resolve({
            browser: true,
        }),
        json(),
        commonjs(),
        babel({
            exclude: 'node_modules/**',
        }),
    ],
    sourceMap: true,
};

这里我们引用了rollup的4个依赖包，我会在下面详细解释。当然我们需要在package.json中添加或者手动安装。当然roll-up的主包必须包含。要想使用es2015 那么babel-preset-es2015-rollup必须被包含。最终的package.json中的devDependencies为下：

"devDependencies": {
    "babel-preset-es2015-rollup": "^3.0.0",
    "rollup": "^0.41.6",
    "rollup-plugin-babel": "^2.7.1",
    "rollup-plugin-commonjs": "^8.0.2",
    "rollup-plugin-json": "^2.3.0",
    "rollup-plugin-node-resolve": "^3.0.0"
  },

对。就这几个依赖包。我们就可以完成项目类库的打包。

1 entry

顾名思义 entry就是项目打包的主入口。这里我们从index.js开始。

2 moduleName

打包的模块名称

3 format

打包后的文件支持的运行环境。
rollup 提供了三种选项

cjs: node.js 环境
iife: 浏览器环境
umd: 兼容环境, 同时支持 node.js 和浏览器

这个配置关系到我打包后的文件的运行环境。我们希望我们的类库既能被nodejs直接使用，又能在浏览器中使用，那么我们就使用umd的配置项。

4 dest

打包输出的目录。

5 sourceMap

配置该项之后，打包同时会生成map文件，这样可以在浏览器中方便进行调试。

6 plugins

这里是重点。我们这里用了4个插件

rollup-plugin-node-resolve:

rollup无法识别node_modules中的包，需要安装插件npm install --save-dev rollup-plugin-node-resolve，然后在plugins中使用：

rollup-plugin-commonjs:
node_modules中的包大部分都是commonjs格式的，要在rollup中使用必须先转为ES6语法，为此需要安装插件 rollup-plugin-commonjs

rollup-plugin-json:
通过该插件可以从JSON文件中导入数据（比如：package.json）

示例
import { version } from "../package.json"

export default function () {
    console.log( 'current version is ' + version );
}

rollup-plugin-babel:
最基本的es6语法转化器。这里可以进行bable的基本配置。

就这么简单，roll-up已经配置完了。

2 classes

目录下有几个文件，都是根据es6语法写的继承类。

animal.js


export default class Animal {
    constructor(name) {
        this.name = name;
    }
    run() {
        console.log(`i am run`)
    }
    brake() {
        console.log('i am brake');
    }

};

Dog.js

import Animal from "./Animal";

export default class Dog extends Animal{
    constructor(name) {
        super();
        this.name = name;
    }
   
    brake() {
        console.log('汪汪汪');
    }

};

Cat.js

import Animal from "./Animal";

export default class Cat extends Animal{
    constructor(name) {
        super();
        this.name = name;
    }
   
    brake() {
        console.log('miao miao miao');
    }

};

PoodleDog.js

import Dog from "./Dog";

export default class PoodleDog extends Dog{
    constructor(name) {
         super();
        this.name = name;
    }
    brake() {
        console.log('喔喔喔');
    }

};

3 index.js

这里是入口文件我们将类进行导出。

import Dog from './classes/Dog'
import Cat from './classes/Cat'
import PoodleDog from './classes/PoodleDog'
const Animals = {
    Dog,
    Cat,
    PoodleDog
};

export default Animals;

完成。

三、运行

执行npm run build，在dist目录下生成了我们想要的文件。
在这里插入图片描述

可以看到 class语法已经被转译成了浏览器可以识别的语法：

在这里插入图片描述

到此。即可以在浏览器或者nodejs中应引用类库了。

四、结语

类库的封装很重要。对于开发sdk是必不可少的一项技能。本人在写一套关于彩票算法的sdk。目前主要框架已经搭建完成。后续完成之后我会考虑开源。对于github上也有该示例的一套模板，大家可以进行下载，修改类即可直接使用。
项目地址

使用rollup+es6+class 打包类库