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

发布时间:2019-08-09 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了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