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 函数冲突。

©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 202,009评论 5赞 474
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 84,808评论 2赞 378
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 148,891评论 0赞 335
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,283评论 1赞 272
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 63,285评论 5赞 363
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,409评论 1赞 281
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 37,809评论 3赞 393
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,487评论 0赞 256
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 40,680评论 1赞 295
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,499评论 2赞 318
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,548评论 1赞 329
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,268评论 4赞 318
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 38,815评论 3赞 304
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,872评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,102评论 1赞 258
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 42,683评论 2赞 348
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,253评论 2赞 341

推荐阅读更多精彩内容