在我们模块化项目时,经常调用一个模块,使用了其中一个方法,其它N多的方法我们未调用,我们希望未调用到的方法或者变量忽略它们,并且不打包到js文件中,这样在大项目里面可以显著减少文件的体积,特别在移动终端,虽然4G非常快,但是我还是希望更省流量。
ES6帮我们实现了,目前 webpack
和 browserify
都还不支持这一屌爆了的功能。如果你现在就想实现这一功能的话,你就可以尝试使用 rollup.js
export function square ( x ) { return x * x; } export function cube ( x ) { return x * x * x; }
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
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 文件了。
例子源码
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