学习rollup.js模块文件打包

时间 2019-11-18

标签学习 rollup.js rollup 模块文件打包栏目 JavaScript 繁體版

原文原文链接

学习rollup.js模块文件打包html

一：rollup 是什么？
Rollup 是一个 JavaScript 模块打包器，能够将小块代码编译成大块复杂的代码.node

webpack 和 Rollup 对比不一样点：webpack

webpack支持在项目中使用对项目进行打包，webpack的核心功能包括 code-splitting（按需加载js）和 static assets（资源文件处理）。es6

rollup 适合使用在独立的js库中进行打包。可是目前还不支持 code-splitting 和热更新，更趋向专一于构建分类的js库，也就是说大多
只会生成一个js文件来被其余项目依赖，更好地利用 es6 modules的优点来缩小和优化代码。web

Tree-shaking
在rollup编译模块的过程当中，经过Tree-shaking的方式来去掉模块中未使用到的代码，仅仅保留被咱们调用到的代码来减小文件的大小。npm

rollup命令安装以下：
命令：npm install -g rollup 进行安装。json

好比咱们看一个demo代码以下：数组

新建文件夹 roll, 文件夹内有以下文件 main.js 和 index.js；及 index.html文件；浏览器

main.js 代码以下：app

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/