使用 rollup 打包你的 ES6 代码

Rollup 是下一代的 javascript 打包器，它使用 tree-shaking 的技术使打包的结果只包括实际用到的 exports。 使用它打包的代码，基本没有冗余的代码，减少了很多的代码体积， 它的官网上有打包的实例代码 Rollup.js 官网。

开始使用

跟 webpack rollup可以以命令行和 javascript 调用两种方式，这里只介绍用javascript的调用的这种方式。首先我们安装一些 rollup 使用到的module, 在 package.json 中加上这些

{
    // ...
    "devDependencies": {
        "babel-core": "^6.13.0",
        "babel-preset-es2015-rollup": "^1.1.1",
        "rollup": "^0.34.3",
        "rollup-plugin-babel": "^2.6.1",
        "rollup-plugin-commonjs": "^3.3.1",
        "rollup-plugin-node-resolve": "^2.0.0",
        "rollup-plugin-uglify": "^1.0.1"
    }
}

编写打包的代码

建一个 build.js 文件，内部代码可以像这样

var rollup = require('rollup');
var babel = require('rollup-plugin-babel');
var uglify = require('rollup-plugin-uglify');
var npm = require('rollup-plugin-node-resolve');
var commonjs = require('rollup-plugin-commonjs');
rollup.rollup({
    entry: 'src/index.js',
    plugins: [
        npm({ jsnext: true, main: true }),
        commonjs(),
        babel({
            exclude: 'node_modules/**',
            presets: [ "es2015-rollup" ]
        })
    ]
}).then(function(bundle) {
    bundle.write({
        format: 'cjs',
        banner: banner,
        dest: 'dist/si_log_common.js'
    });
});

如果需要同时 输出 commonJS 规范和 UMD 规范的代码只要这样既可

rollup.rollup({
    entry: 'src/index.js',
    plugins: [
        npm({ jsnext: true, main: true }),
        commonjs(),
        babel({
            exclude: 'node_modules/**',
            presets: [ "es2015-rollup" ]
        })
    ]
}).then(function(bundle) {
    bundle.write({
        format: 'cjs',
        banner: banner,
        dest: 'dist/si_log_common.js'
    });
    rollup.rollup({
        entry: 'src/index.js',
        plugins: [
            npm({ jsnext: true, main: true }),
            uglify(),   // 加入压缩代码
            commonjs(),
            babel({
                exclude: 'node_modules/**',
                presets: [ "es2015-rollup" ]
            })
        ]
    }).then(function(bundle) {
        bundle.write({
            // output format - 'amd', 'cjs', 'es6', 'iife', 'umd'
            format: 'umd',
            moduleName: 'siLog',
            sourceMap: true,
            dest: 'si_log.js'
        });
    })
}).catch(function(err){
    console.log(err);
});

最后在 package.json 中 加载scripts使用:

{
    // ...
    "scripts": {
        // ...
        "build": "node build/build.js"
    },
}

然后执行命令

npm run build

这样打包的操作就结束了，rollup打包的代码提交较小，相比 webpack rollup 最后输出的代码，非常的整洁，结构清晰。

近期bug解决

最近 babel-preset-es2015-rollup 这个插件可能有问题，如果打包的时候发现报错

[Error: It looks like your Babel configuration specifies a module transformer. Please disable it. If you're using the "es2015" preset, consider using "es2015-rollup" instead. See https://github.com/rollup/rollup-plugin-babel#configuring-babel for more information]

只要执行以下命令即可:

npm install babel-preset-es2015@6.13.0