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

ECMAScript   2016-02-27 18:39:28 发布
您的评价:
     
0.0
收藏     0收藏
文件夹
标签
(多个标签用逗号分隔)

来自: https://segmentfault.com/a/1190000004499989

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

扩展阅读

30分钟掌握ES6/ES2015核心内容(下)
Rollup 试炼之路
[译] 用 ES6 构建新一代可复用 JS 模块
谈谈React.js的核心入门知识
React.js的一些入门基础知识

为您推荐

EJS 中文文档
基于Html5的网页大头贴
WEB前端规范
AngularJS + CoffeeScript 前端开发环境配置详解
用 Vuex 构建一个笔记应用

更多

ECMAScript
JavaScript开发
相关文档  — 更多
相关经验  — 更多
相关讨论  — 更多