基础知识,js模块文件打包

原先一如既往都在用 wepack 打包自个儿项目, 不过为了打探 vue 打包原理,明天大家来回顾地看一下 rollup 是什么打包项目。大家先创建二个品种接下来创立三个 main.js 作为大家应用主文件,大家主文件注重 a.js 。

上学rollup.js模块文件打包

图片 1

一:rollup 是什么?
Rollup 是多个 JavaScript 模块打包器,能够将小块代码编译成大块复杂的代码.

接下来大家引进 a.js 的 show 的格局。

webpack 和 Rollup 相比较不一样点:

图片 2

webpack支撑在品种中动用对项目开展包装,webpack的骨干职能包涵code-splitting(按需加载js)和 static assets(能源文件管理)。

在 a.js 文件中大家定义一个艺术 show 然后将那几个主意以指标的性质方式暴光给另外 js 使用,这里大家使用 ES6 模块达成管理大家应用。

rollup 相符利用在独立的js库中展开打包。不过当前还不援助code-splitting 和 热更新,更趋向专一于构建分类的js库,也正是说多数
只会转移贰个js文件来被其余体系正视,越来越好地利用 es6 modules的优势来压缩和优化代码。

图片 3

Tree-shaking
在rollup编写翻译模块的经过中,通过Tree-shaking的措施来去掉模块中未选用到的代码,仅仅保留被我们调用到的代码来压缩文件的尺寸。

在运维在此之前大家须求全局安装一下 rollup ,

rollup命令安装如下:
一声令下:npm install -g rollup 举行安装。

图片 4

举例说大家看三个demo代码如下:

出口的文书正是以此样子,好了笔者们透过轻易 demo 来用 rollup 打包一下大家项目。

新建文件夹 roll, 文件夹内有如下文件 main.js 和 index.js; 及 index.html文件;

图片 5

main.js 代码如下:

大家也能够写八个陈设文件 config 让我们 rollup 读取我们的布局文件来打包大家的 main.js 生成 bundle.js。

export function aa(x) {
  return x * x;
}

export function bb(y) {
  return y + y;
}

图片 6

index.js 代码如下:

下一场大家就 通过--config 参数读取配置的公文来打包我们的使用文本。

import { bb } from './main.js';

console.log(bb(5)); 

图片 7

如上代码可以看见,main.js 内有五个函数 aa, 和 bb, 不过在index.js内,并不曾行使aa那些函数,当大家应用 rollup举行模块打包
的时候,会把未调用到的函数会去掉,那样的话,能够使多余代码去掉,使得文件越来越小。

接下去大家看一看 vue 的构建进度

rollup 打包有以下两种方法:
1. 对于浏览器 能够有如下命令:

图片 8图片 9

rollup index.js -o bundle2.js -f iife 

大家打字与印刷一下 gen

末段生成 bundle2.js 代码如下样子:

在 build.js 中大家会用到 getAllBuilds

(function () {
'use strict';

function bb(y) {
  return y + y;
}

console.log(bb(5));

}());

本条点子是生育 config 配置文件的函数,其实genConfig 就是回来一个布局对象 rollup 会读取配置对象来进展营造大家项目。

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版本协理es贰零壹陆语法。

默许的布置文件叫 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 能够看官方网址

本文由365bet体育在线官网发布于网络工程,转载请注明出处:基础知识,js模块文件打包

TAG标签:
Ctrl+D 将本页面保存为书签,全面了解最新资讯,方便快捷。