Rollup.js 下一代的ES6模块打包机 demo
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
dist update Mar 17, 2016
src update Mar 17, 2016
test update. Mar 17, 2016
.babelrc update Mar 17, 2016
.gitignore ... Feb 26, 2016
README.md first commit Feb 26, 2016
bundle.js update. Mar 17, 2016
gulpfile.babel.js update Mar 17, 2016
package.json update Mar 17, 2016

README.md

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

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

ES6帮我们实现了,目前 webpackbrowserify 都还不支持这一屌爆了的功能。如果你现在就想实现这一功能的话,你就可以尝试使用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.jspackage.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.jsmain.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