在我们模块化项目时，经常调用一个模块，使用了其中一个方法，其它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

参考资料