在我们模块化项目时，常常挪用一个模块，运用了个中一个要领，别的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 – 运用于<script> 标签援用的体式格局
            // umd – 适用于CommonJs和AMD作风通用形式
            format: 'cjs'
        });

        fs.writeFileSync( 'bundle.js', result.code );

        bundle.write({
            format: 'cjs',
            dest: 'dist/main.js'
        });
    });
});

再去竖立 main.js 和 main.js ，运转 npm script 举行打包，便可获得你想要的js 文件了。

例子源码

rollup 插件

Plugins: https://github.com/rollup/rollup/wiki/Plugins

• babel – transpile code with Babel

• browserify-transform – use Browserify transforms as plugins

• coffee-script – convert CoffeeScript to JS

• commonjs – convert CommonJS modules to ES6

• eslint – verify entry and imported scripts

• includepaths – provide base paths to resolve imports from

• inject – detect dependencies and inject them

• istanbul – Instruments code for code coverage with Istanbul

• json – convert JSON to ES6

• memory – load entry from memory

• multi-entry – allows multiple ‘entry points’ instead of just one

• node-resolve – use the Node.js module resolution algorithm (e.g. modules from node_modules, installed with npm)

• pegjs – import PEG.js grammars as parsers

• postcss – compile postcss and insert to head

• ractive – precompile Ractive components

• replace – replace occurrences of a set of strings

• riot – compile Riot.js tag file

• string – import text files as strings

• stylus-css-modules – compile Stylus and inject CSS modules

• uglify – minify generated bundle

• vue – compile vue components

参考资料

官网:http://rollupjs.org
Github:https://github.com/rollup/rollup

关注民众号