脚本宝典收集整理的这篇文章主要介绍了Rollup.js 下一代的ES6模块打包机,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
在我们模块化项目时,经常调用一个模块,使用了其中一个方法,其它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