Rollup.js 下一代的ES6模块打包机

在我们模块化项目时，经常调用一个模块，使用了其中一个方法，其它N多的方法我们未调用，我们希望未调用到的方法或者变量忽略它们，并且不打包到js文件中，这样在大项目里面可以显著减少文件的体积，特别在移动终端，虽然4G非常快，但是我还是希望更省流量。

ES6帮我们实现了，目前 webpack 和 browserify 都还不支持这一屌爆了的功能。如果你现在就想实现这一功能的话，你就可以尝试使用rollup.js

maths.js

export function square ( x ) {
    return x * x;
}
export function cube ( x ) {
    return x * x * x;
}

main.js

import { cube } from './maths.js';
console.log( cube( 5 ) ); // 125

通过 rollup.js 编译，maths.js中未调用的方法 square() 并未打包到新的js中。代码如下：

(function () {
    'use strict';
    function cube ( x ) {
        return x * x * x;
    }
    console.log( cube( 5 ) ); // 125
}());

使用方法

使用gulp工具来搞定打包功能。首先在根目录建立gulpfile.js 和 package.json 文件这个是 gulp 工具的标配。如果你不知道怎么玩儿gulp，你得先去研究研究

先安装依赖模块

npm install gulp --save
npm install rollup --save
npm install rollup-plugin-commonjs --save
npm install rollup-plugin-node-resolve --save

gulpfile.js

var gulp        = require('gulp');
var fs          = require('fs');
var rollup      = require('rollup').rollup;
var commonjs    = require('rollup-plugin-commonjs');
var nodeResolve = require('rollup-plugin-node-resolve');

gulp.task('script', function () {
    return rollup({
        entry: 'src/main.js',
        plugins: [
            nodeResolve({ jsnext: true }),
            commonjs()
        ]
    }).then(function (bundle) {
        // 输出 bundle + sourcemap
        var result = bundle.generate({
            // output format - 'amd', 'cjs', 'es6', 'iife', 'umd'
            // amd – 使用像requirejs一样的银木块定义
            // cjs – CommonJS，适用于node和browserify / Webpack
            // es6 (default) – 保持ES6的格式
            // iife – 使用于