学习rollup.js模块文件打包
2017-12-30 19:34 龙恩0707 阅读(5981) 评论(0) 编辑 收藏 举报学习rollup.js模块文件打包
一:rollup 是什么?
Rollup 是一个 JavaScript 模块打包器,可以将小块代码编译成大块复杂的代码.
webpack 和 Rollup 对比不同点:
webpack支持在项目中使用对项目进行打包,webpack的核心功能包括 code-splitting(按需加载js)和 static assets(资源文件处理)。
rollup 适合使用在独立的js库中进行打包。但是目前还不支持 code-splitting 和 热更新,更趋向专注于构建分类的js库,也就是说大多
只会生成一个js文件来被其他项目依赖,更好地利用 es6 modules的优势来缩小和优化代码。
Tree-shaking
在rollup编译模块的过程中,通过Tree-shaking的方式来去掉模块中未使用到的代码,仅仅保留被我们调用到的代码来减少文件的大小。
rollup命令安装如下:
命令:npm install -g rollup 进行安装。
比如我们看一个demo代码如下:
新建文件夹 roll, 文件夹内有如下文件 main.js 和 index.js; 及 index.html文件;
main.js 代码如下:
export function aa(x) { return x * x; } export function bb(y) { return y + y; }
index.js 代码如下:
import { bb } from './main.js';
console.log(bb(5));
如上代码可以看到,main.js 内有两个函数 aa, 和 bb, 但是在index.js内,并没有使用aa这个函数,当我们使用 rollup进行模块打包
的时候,会把未调用到的函数会去掉,这样的话,可以使多余代码去掉,使得文件更小。
rollup 打包有以下几种方式:
1. 对于浏览器 可以有如下命令:
rollup index.js -o bundle2.js -f iife
最后生成 bundle2.js 代码如下样子:
(function () { 'use strict'; function bb(y) { return y + y; } console.log(bb(5)); }());
2. 对于Node.js 代码如下样子:(编译成CommonJS的模块样子)
rollup index.js -o bundle.js -f cjs
如上命令 -f 是 (--output.format的缩写),指定了所创建的bundle的类型,这里是CommonJS(在Node.js中运行的)。
最后生成 bundle.js 代码如下样子:
'use strict'; function bb(y) { return y + y; } console.log(bb(5));
3. 对于浏览器和 Node.js(使用UMD format requires a bundle name):
rollup index.js -o bundle3.js -f umd --name 'myBundle'
最后生成 bundle3.js 代码如下样子:
(function (global, factory) { typeof exports === 'object' && typeof module !== 'undefined' ? factory() : typeof define === 'function' && define.amd ? define(factory) : (factory()); }(this, (function () { 'use strict'; function bb(y) { return y + y; } console.log(bb(5)); })));
二:使用配置文件
rollup 也可以和webpack一样使用配置文件来进行打包了,rollup的默认配置文件就叫 rollup.config.js, 我在roll文件夹下 新建一个roll.config.js后,然后添加如下代码:
export default { input: './main.js', output: { file: 'bundle4.js', format: 'cjs' } }
然后在roll文件夹内, 运行命令 rollup -c 来使用配置文件,就会在roll项目文件夹内生成 bundle4.js文件,里面生成后的代码
如下:
'use strict'; Object.defineProperty(exports, '__esModule', { value: true }); function aa(x) { return x * x; } function bb(y) { return y + y; } exports.aa = aa; exports.bb = bb;
注意:Rollup本身会处理配置文件,所以可以使用 export default的语法,代码不会经过Babel等类似工具编译,所以只能使用
所用node.js版本支持es2015语法。
默认的配置文件叫 rollup.config.js, 我们也可以叫不同的名字,比如叫 rollup.config.dev.js或roll.config.prod.js,
因此我们允许命令的时候可以如下运行: rollup --config rollup.config.dev.js
rollup 配置选项如下:
input: 这个包的入口点 比如我上面包的入口点为 main.js
output: { file: 'bundle4.js', format: 'cjs', name: 'MyBundle' }
output.file: 要写入的文件,也可以用于生成的sourcemaps。
output.format 生成包的格式,有如下格式:
1. amd -- 异步模块定义,用于像RequestJS这样的模块加载器。
2. cjs -- CommonJS, 适用于Node或Browserify/webpack
3. es -- 将软件包保存为ES模块文件。
4. iife -- 一个自动执行的功能,适合作为 <script>标签这样的。
5. umd -- 通用模块定义,以amd, cjs, 和 iife 为一体。
output.name: 代表iife/umd 包,同一页上的其他的脚本可以访问,比如:配置文件如下:
export default { input: './main.js', output: { file: 'bundle5.js', format: 'iife', name: 'MyBundle1' } }
最后生成 bundle5.js 代码变为如下:
var MyBundle1 = (function (exports) { 'use strict'; function aa(x) { return x * x; } function bb(y) { return y + y; } exports.aa = aa; exports.bb = bb; return exports; }({}));
下面分别看看以 amd, cjs, es, iife 及 umd 打包生成后的文件进行对比下,看看他们打包后的代码分别是什么样的:
1-1 amd配置文件如下(rollup.config.js):
export default { input: './main.js', output: { file: 'amd.js', format: 'amd', name: 'AMD' } }
打包后生成的amd.js如下:
define(['exports'], function (exports) { 'use strict'; function aa(x) { return x * x; } function bb(y) { return y + y; } exports.aa = aa; exports.bb = bb; Object.defineProperty(exports, '__esModule', { value: true }); });
1-2 cjs配置文件如下(rollup.config.js):
export default { input: './main.js', output: { file: 'cjs.js', format: 'cjs', name: 'CJS' } }
打包后生成的cjs.js如下:
'use strict'; Object.defineProperty(exports, '__esModule', { value: true }); function aa(x) { return x * x; } function bb(y) { return y + y; } exports.aa = aa; exports.bb = bb;
1-3 es配置文件如下(rollup.config.js):
export default { input: './main.js', output: { file: 'es.js', format: 'es', name: 'ES' } }
打包后生成的es.js如下:
function aa(x) { return x * x; } function bb(y) { return y + y; } export { aa, bb };
1-4 iife配置文件如下(rollup.config.js):
export default { input: './main.js', output: { file: 'iife.js', format: 'iife', name: 'IIFE' } }
打包后生成的iife.js如下:
var IIFE = (function (exports) { 'use strict'; function aa(x) { return x * x; } function bb(y) { return y + y; } exports.aa = aa; exports.bb = bb; return exports; }({}));
1-5 umd 配置文件如下(rollup.config.js):
export default { input: './main.js', output: { file: 'umd.js', format: 'umd', name: 'UMD' } }
打包后生成的umd.js如下:
(function (global, factory) { typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) : typeof define === 'function' && define.amd ? define(['exports'], factory) : (factory((global.UMD = {}))); }(this, (function (exports) { 'use strict'; function aa(x) { return x * x; } function bb(y) { return y + y; } exports.aa = aa; exports.bb = bb; Object.defineProperty(exports, '__esModule', { value: true }); })));
所有的配置选项如下:
// rollup.config.js export default { // 核心选项 input, // 要打包的文件 external, // 将模块ID的逗号分隔列表排除 plugins, // 额外选项 onwarn, // danger zone acorn, context, moduleContext, legacy, output: { // 如果需要输出多个,可以为数组 // 核心选项 file, // 输出的文件(如果没有这个参数,则直接输出到控制台) format, // 输出的文件类型(amd, cjs, es, iife, umd) name, // 生成UMD模块的名字 global, // 以`module ID:Global` 键值对的形式,用逗号分隔开 任何定义在这里模块ID定义添加到外部依赖 // 额外选项 paths, banner, // 在打包好的文件的块的外部(wrapper外部)的最顶部插入一段内容 footer, // 在打包好的文件的块的外部(wrapper外部)的最底部插入一段内容 intro, // 在打包好的文件的块的内部(wrapper内部)的最顶部插入一段内容 outro, // 在打包好的文件的块的内部(wrapper内部)的最底部插入一段内容 sourcemap, sourcemapFile, interop, // 高危选项 exports, amd, indent, strict } }
三:使用插件
目前为止,我们通过相对路径,将一个入口文件和一个模块创建了一个简单的bundle.js, 但是当构建非常复杂的时候,我们需要引入npm安装模块,通过Babel编译代码,和JSON文件打交道等。因此我们可以使用插件在打包过程中更改Rollup的行为。
3-1 rollup-plugin-json (使rollup从JSON文件中读取数据)
将 rollup-plugin-json 安装为开发依赖。命令如下:
npm install --save-dev rollup-plugin-json
安装之前,我们在项目中新建或安装一个 package.json; 具体安装不介绍(使用npm init一直回车键即可)。
我们先来更改 main.js文件代码,代码变成如下:
import { version } from './package.json'; export default function() { console.log('version ' +version); }
在继续编辑 rollup.config.js文件,加入 JSON插件。
代码如下:
import json from 'rollup-plugin-json'; export default { input: './main.js', output: { file: 'pluginjson.js', format: 'cjs', }, plugins: [ json() ] }
最后会生成pluginjson文件代码如下:
'use strict'; var version = "1.0.0"; function main() { console.log('version ' +version); } module.exports = main;
3-2 rollup-plugin-node-resolve 和 rollup-plugin-commonjs 插件
这两个插件可以让你加载 Node.js里面的CommonJS模块。
先安装这两个插件:
npm install --save-dev rollup-plugin-node-resolve rollup-plugin-commonjs
更多关于 rollup 可以看官网 http://www.rollupjs.com/