Repository files navigation

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

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

maths.js

exportfunctionsquare(x){returnx*x;}exportfunctioncube(x){returnx*x*x;}

main.js

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

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

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

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

先安装依赖模块

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

gulpfile.js

vargulp=require('gulp');varfs=require('fs');varrollup=require('rollup').rollup;varcommonjs=require('rollup-plugin-commonjs');varnodeResolve=require('rollup-plugin-node-resolve');gulp.task('script',function(){returnrollup({entry:'src/main.js',plugins:[nodeResolve({jsnext:true}),commonjs()]}).then(function(bundle){// 输出 bundle + sourcemapvarresult=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 fromnode_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