Babel 进阶三

相关工具包总结：

Babel 相关工具包：

• @babel/core 提供核心功能
• @babel/cli 提供命令行工具
• @babel/preset-env 转换语法
• core-js 提供全局 API
• regenerator-runtime 提供 regeneratorRuntime 函数
• @babel/polyfill 通过引用 core-js 提供全局 API，通过引用 regenerator-runtime 提供全局 regeneratorRuntime 函数
• @babel/runtime 提供帮助函数，并且通过引用 regenerator-runtime 提供 regeneratorRuntime 函数
• @babel/runtime-corejs2 提供帮助函数、非全局 API，并且通过引用 regenerator-runtime 提供 regeneratorRuntime 函数
• @babel/runtime-corejs3 提供帮助函数、非全局 API，并且通过引用 regenerator-runtime 提供 regeneratorRuntime 函数
• @babel/plugin-transform-runtime 通过引用 @babel/runtime 或者 @babel/runtime-corejs2 或者 @babel/runtime-corejs3 转换内联帮助函数、转换全局 API、提供非全局 regeneratorRuntime 函数

Babel 相关工具包的安装：

• @babel/core 必须手动安装
• @babel/cli 使用命令行转码必须手动安装，使用 Webpack 转码不用安装
• @babel/preset-env 必须手动安装
• @babel/polyfill 需要的时候手动安装
• core-js@2 需要的时候手动安装，安装 @babel/polyfill 的时候会自动安装 core-js@2
• core-js@3 需要的时候手动安装
• @babel/plugin-transform-runtime 需要的时候手动安装。
• @babel/runtime 需要的时候手动安装，安装 @babel/preset-env 的时候会自动安装 @babel/runtime
• @babel/runtime-corejs2 需要的时候手动安装
• @babel/runtime-corejs3 需要的时候手动安装
• regenerator-runtime 需要的时候手动安装，安装 @babel/polyfill、@babel/runtime、@babel/runtime-corejs2、@babel/runtime-corejs3 其中之一的时候会自动安装 regenerator-runtime

补齐 API 的几种常用方式

在实际的开发中，我们经常使用按需自动补齐 API，而不是在入口文件手动引入 API。

使用 @babel/polyfill 补齐 API

设置 @babel/preset-env 的 useBuiltIns 为 'usage'，能够按需自动引入 core-js 来补齐 API，按需自动引用 regenerator-runtime 来引入 regeneratorRuntime 函数。

• 不需要在代码的入口文件手动引入 @babel/polyfill
• 仍然需要安装 @babel/polyfill
• 自动引入代码中用到的 API，代码中没用到的 API 不引入。
• 自动引入 regeneratorRuntime 函数，代码中没用到 Generator/async 函数，则不引入。
• 会根据 browserslist 设置的目标环境来引入 API 和 regeneratorRuntime 函数。
• 只引入目标环境不支持的 API 和 regeneratorRuntime 函数。
• 如果没有通过 browserslist 设置目标环境，则只要是代码中用到的 API 都会引入。

安装 npm 包：

npm i -D @babel/core @babel/cli @babel/preset-env
npm i @babel/polyfill

配置文件：

const presets = [
  [
    '@babel/env',
    {
      useBuiltIns: 'usage',
      corejs: 2
    }
  ]
]
const plugins = []

module.exports = {
  presets,
  plugins
}

入口文件：

var promise = Promise.resolve();
function* gen () {
  yield 100;
}

Babel 转码之后：

"use strict";

require("regenerator-runtime/runtime.js");

require("core-js/modules/es6.object.to-string.js");

require("core-js/modules/es6.promise.js");

var _marked = /*#__PURE__*/regeneratorRuntime.mark(gen);

var promise = Promise.resolve();

function gen() {
  return regeneratorRuntime.wrap(function gen$(_context) {
    while (1) {
      switch (_context.prev = _context.next) {
        case 0:
          _context.next = 2;
          return 100;

        case 2:
        case "end":
          return _context.stop();
      }
    }
  }, _marked);
}

可以看到 Babel 转码之后，会自动引入 regenerator-runtime/runtime.js 来引入 regeneratorRuntime 函数，自动引入 core-js/modules/es6.promise.js 来引入代码中使用到的 Promise。对于代码中没有使用到的其他 API，不会引入进来。

由于转码之后的代码中使用到了 core-js 包和 regenerator-runtime 包，因此需要安装他们，否则在 Webpack 打包的时候由于找不到依赖包，会报错。

在安装 @babel/polyfill 的时候，会自动安装 core-js 包和 regenerator-runtime 包，因此不需要再手动安装他们了。但是这时候的 core-js 是固定的 2 版本，因此 @babel/preset-env 的 corejs 选项必须填 2.

使用 core-js 补齐 API

设置 @babel/preset-env 的 useBuiltIns 为 'usage'，能够按需自动引入 core-js 来补齐 API，按需自动引用 regenerator-runtime 来引入 regeneratorRuntime 函数。

• 不需要在代码的入口文件手动引入 core-js/stable 和 regenerator-runtime/runtime
• 仍然需要安装 core-js 和 regenerator-runtime
• 自动引入代码中用到的 API，代码中没用到的 API 不引入。
• 自动引入 regeneratorRuntime 函数，代码中没用到 Generator/async 函数，则不引入。
• 会根据 browserslist 设置的目标环境来引入 API 和 regeneratorRuntime 函数。
• 只引入目标环境不支持的 API 和 regeneratorRuntime 函数。
• 如果没有通过 browserslist 设置目标环境，则只要是代码中用到的 API 都会引入。

安装 npm 包：

npm i -D @babel/core @babel/cli @babel/preset-env
npm i core-js@3 regenerator-runtime

配置文件：

const presets = [
  [
    '@babel/env',
    {
      useBuiltIns: 'usage',
      corejs: 3
    }
  ]
]
const plugins = []

module.exports = {
  presets,
  plugins
}

入口文件：

var promise = Promise.resolve();
function* gen () {
  yield 100;
}

Babel 转码之后：

"use strict";

require("regenerator-runtime/runtime.js");

require("core-js/modules/es.object.to-string.js");

require("core-js/modules/es.promise.js");

var _marked = /*#__PURE__*/regeneratorRuntime.mark(gen);

var promise = Promise.resolve();

function gen() {
  return regeneratorRuntime.wrap(function gen$(_context) {
    while (1) {
      switch (_context.prev = _context.next) {
        case 0:
          _context.next = 2;
          return 100;

        case 2:
        case "end":
          return _context.stop();
      }
    }
  }, _marked);
}

可以看到 Babel 转码之后，会自动引入 regenerator-runtime/runtime.js 来引入 regeneratorRuntime 函数，自动引入 core-js/modules/es.promise.js 来引入代码中使用到的 Promise。对于代码中没有使用到的其他 API，不会引入进来。

由于转码之后的代码中使用到了 core-js 包和 regenerator-runtime 包，因此需要安装他们，否则在 Webpack 打包的时候由于找不到依赖包，会报错。

手动安装 core-js 包的时候，可以指定 core-js 的版本，@babel/preset-env 的 corejs 选项也要填写对应的版本。

regenerator-runtime 包其实可以不用手动安装，因为在安装 @babel/preset-env 的时候会自动安装 @babel/runtime，而安装 @babel/runtime 的时候会自动安装regenerator-runtime 包。但是一般都会手动再装一遍 npm i regenerator-runtime ，这样就可以把 regenerator-runtime 写入到 package.json 中的 dependencies 里面了。

使用 @babel/plugin-transform-runtime 补齐 API

设置 @babel/plugin-transform-runtime 的 corejs、helpers、regenerator 选项，能够自动按需补齐 API、引入 regeneratorRuntime 函数和帮助函数。

• corejs: 3：自动引入 @babel/runtime-corejs3/core-js-stable 来替换全局 API。
• helpers: true：自动引入 @babel/runtime-corejs3/helpers 来替换内联帮助函数。
• regenerator: true：自动引入 @babel/runtime-corejs3/regenerator 来提供 regeneratorRuntime 函数，@babel/runtime-corejs3/regenerator 会引用 regenerator-runtime。

const plugins = [
  [
    '@babel/plugin-transform-runtime',
    {
      corejs: 3,
      regenerator: true,
      helpers: true
    }
  ]
]

需要安装：

• 需要安装 @babel/core @babel/cli @babel/preset-env
• 需要安装 @babel/plugin-transform-runtime
• 需要安装 @babel/runtime-corejs2 或者 @babel/runtime-corejs3

不需要安装：

• 不需要安装 @babel/polyfill
• 不需要安装 core-js
• 不需要安装 regenerator-runtime，安装 @babel/runtime-corejs2 或者 @babel/runtime-corejs3 的时候会自动安装 regenerator-runtime

自动按需引入：

• 不需要在代码的入口文件手动引入 @babel/polyfill
• 不需要在代码的入口文件手动引入 core-js/stable 和 regenerator-runtime/runtime
• 自动引入代码中用到的 API，代码中没用到的 API 不引入。
• 自动引入 regeneratorRuntime 函数，代码中没用到 Generator/async 函数，则不引入。
• 会根据 browserslist 设置的目标环境来引入 API 和 regeneratorRuntime 函数。
• 只引入目标环境不支持的 API 和 regeneratorRuntime 函数。
• 如果没有通过 browserslist 设置目标环境，则只要是代码中用到的 API 都会引入。

安装 npm 包：

npm i -D @babel/core @babel/cli @babel/preset-env @babel/plugin-transform-runtime
# 安装一个即可
# npm i @babel/runtime-corejs2
npm i @babel/runtime-corejs3

配置文件：

const presets = ['@babel/env']
const plugins = [
  [
    '@babel/plugin-transform-runtime',
    {
      helpers: true,
      corejs: 3,
      regenerator: true
    }
  ]
]

module.exports = {
  presets,
  plugins
}

入口文件：

var promise = Promise.resolve();
function* gen () {
  yield 100;
}

Babel 转码之后：

"use strict";

var _regeneratorRuntime2 = require("@babel/runtime-corejs3/regenerator");

var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");

var _regenerator = _interopRequireDefault(require("@babel/runtime-corejs3/regenerator"));

var _promise = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/promise"));

var _marked = /*#__PURE__*/_regeneratorRuntime2.mark(gen);

var promise = _promise["default"].resolve();

function gen() {
  return _regenerator["default"].wrap(function gen$(_context) {
    while (1) {
      switch (_context.prev = _context.next) {
        case 0:
          _context.next = 2;
          return 100;

        case 2:
        case "end":
          return _context.stop();
      }
    }
  }, _marked);
}

可以看到 Babel 转码之后，会自动引入 @babel/runtime-corejs3/regenerator 来引入 regeneratorRuntime 函数，自动引入 @babel/runtime-corejs3/core-js-stable/promise 来替换代码中使用到的全局的 Promise，会自动引入 @babel/runtime-corejs3/helpers 来替换代码中需要的内联帮助函数。对于代码中没有使用到的其他 API，不会引入进来。

@babel/polyfill 与 @babel/plugin-transform-runtime 对比

@babel/polyfill 和 @babel/plugin-transform-runtime 都可以用来补齐 API，引入 regeneratorRuntime 函数，通常只选择一种方式即可。@babel/plugin-transform-runtime 有个缺点，它无法补充实例方法，例如 Array.prototype.find。

通过 @babel/plugin-transform-runtime 补齐 API 主要是给开发 JS 库或 npm 包等的人用的，我们的前端工程一般仍然使用 @babel/polyfill 补齐 API。可以想象，如果开发 JS 库的人使用 @babel/polyfill 补齐API，那么会重新定义 window.Promise 对象，我们前端工程也使用 @babel/polyfill 补齐API，也会重新定义 window.Promise 对象，如果两个全局对象不一致，那么我们引入该 JS 库后很可能会导致我们的前端工程出问题。当然，我们前端工程开发的时候也是可以使用 @babel/plugin-transform-runtime 来替代 @babel/polyfill 的补全功能，毕竟没有污染全局环境，不会有任何冲突。

通过组合使用 @babel/polyfill 和 @babel/plugin-transform-runtime，可以同时实现按需引入 API、regeneratorRuntime 函数、帮助函数。

安装 npm 包：

npm i -D @babel/core @babel/cli @babel/preset-env @babel/plugin-transform-runtime
npm i @babel/polyfill

配置文件：

const presets = [
  [
    '@babel/env',
    {
      useBuiltIns: 'usage',
      corejs: 2
    }
  ]
]

const plugins = [
  [
    '@babel/plugin-transform-runtime',
    {
      helpers: true,
      corejs: false,
      regenerator: false
    }
  ]
]

module.exports = {
  presets,
  plugins
}

注意将 @babel/plugin-transform-runtime 的 corejs 和 regenerator 设置为 false，这样就只能通过 @babel/plugin-transform-runtime 提供帮助函数，从而不会与 @babel/polyfill 提供的 API 和 regeneratorRuntime 函数冲突。