前端工程化：你所需要知道的最新的babel兼容性实现方案

﹏ヽ暗。殇╰゛Y 2022-09-01 10:58 45阅读 0赞

点击上方 前端瓶子君，关注公众号

回复算法，加入前端编程面试算法每日一题群

![453ee70ff02c0ad2c3c8b23cfd78bd2e.png][]

网上关于`babel`兼容性实现方案的剖析有很多，但大部分剖析案例已经不适用于现在的`babel`生态。作者在最新`babel7`的基础上，不断编译验证，发现跟网上大部分剖析案例还是有很大不同。所以，输出本文的目的是为了给大家带来最新的`babel`兼容性方案剖析，让大家对`babel`的兼容性处理机制有更透彻的了解。

## 1. core-js ##

> 友情提醒：如果不了解`core-js`是什么的同学，请务必先阅读这一章节，这样有助于后面章节的理解！

core-js\[1\]是`JavaScript`的模块化标准库，包括了`ECMAScript`到`2021`年的新`api`的向后兼容实现。**它和`babel`高度集成，是`babel`解决新特性在浏览器中兼容问题的核心依赖**。

目前`core-js`的版本是`3.x`，与`core-js@2`相比不仅在本身的架构上有重大调整，还对`babel`中的一些插件有重大影响。

### 1.1 core-js@2 ###

`core-js@2`被`@babel/polyfill`、`@babel/preset-env`和`@babel/runtime-corejs2`引入来进行新`api`的兼容处理，其中有两个核心的模块：

1.  `library`：不污染全局的`runtime`模块，供`@babel/runtime-corejs2`引入；
2.  `modules`：污染全局的`polyfill`模块，供`@babel/polyfill`和`@babel/preset-env`引入。

> **不污染全局的`runtime`模块主要是采用模拟替换`api`的方式解决兼容性问题；污染全局的`polyfill`模块主要是采用在全局和实例上添加`api`的方式解决兼容性问题。**

### 1.2 core-js@3 ###

`core-js@3`放弃了对`@babel/polyfill`的支持，被`@babel/preset-env`和`@babel/runtime-corejs3`引入来进行新`api`的兼容处理。

由于`core-js@2`包的体积太大（约2M），并且有很多重复的文件被引用。所以，`core-js@3`对包进行拆分，其中两个核心的包分别是：

1.  core-js\[2\]：污染全局的`polyfill`包，供`@babel/preset-env`引入，等价于`core-js@2/modules`（约500k, 40k minified and gzipped）；
2.  core-js-pure\[3\]：不污染全局的`runtime`包，供`@babel/runtime-corejs3`引入，等价于`core-js@2/library`（约440k）。

`core-js@2`分支已经冻结，不会再添加新特性，新特性都会添加到`core-js@3`。例如你使用了 `Array.prototype.flat()`，如果你使用的是`core-js@2`，那么其不包含此新特性。但是你仍然可以在`core-js@3`的基础上使用`core-js@2`的功能。为了可以使用更多的新特性，建议大家使用`core-js@3`。

关于`core-js`的内容大家先了解这么多，先有个印象，大家只需要记住一点：

> **`corejs`才是`api`兼容实现的提供者！**

接下来的内容中，作者都会在`core-js@2`和`3`的基础上进行区别详解，以让大家更深入的了解`core-js`。

## 2. @babel/preset-env ##

`babel`运行总共分为三个阶段：**解析**、**转换**、**生成**，如下图：

![6044e7333ee0e15658d7e55934254338.png][] AST.png

`babel`自`6.0`起，就不再对代码进行`transform`，现在只负责上图中的`parse`和`generate`过程，代码的`transform`过程全都交给一个个`plugin`去做。所以在没有配置任何`plugin`的情况下，经过`babel`输出的代码是没有改变的。

有的环境下可能需要转换几十种不同语法的代码，则需要配置几十个`plugin`，这显然会非常繁琐。所以，为了解决这种问题，`babel`提供了预设插件机制`preset`，`preset`中可以**预设置一组插件来便捷的使用这些插件所提供的功能**。目前，`babel`官方推荐使用`@babel/preset-env`预设插件。

> 从`babel@7`开始，所以针对标准提案阶段的功能所编写的预设（`stage preset`）都已被弃用，官方已经移除了`@babel/preset-stage-x`。

`@babel/preset-env`**主要的作用是用来转换那些已经被正式纳入`TC39`中的语法**。所以它无法对那些还在提案中的语法进行处理，对于处在`stage`中的语法，需要安装对应的`plugin`进行处理。

{
      "presets": [
        ["@babel/preset-env"]
      ]
    }
    复制代码

除了语法转换，`@babel/preset-env`另一个重要的功能是**对`api`的处理，也就是在代码中引入`polyfill`**。但是，`@babel/preset-env`**默认是不开启处理`api`的功能，只有设置了`useBuiltIns`选项（不为`false`）才会开启**。

`@babel/preset-env`主要还是依赖`core-js`来处理`api`的兼容性，在升级到`7.4.0`以上的版本以后，既支持`core-js@2`，也支持`core-js@3`，所以增加了`corejs`的配置来控制所需的版本。**如果设置了`useBuiltIns`选项（不为`false`）就得设置`corejs`版本，否则`babel`将会发出警告**。

{
      "presets": [
        [
          "@babel/preset-env",
          {
            "useBuiltIns": "usage", // 也可配置成 entry，配置为 false 则不需要配置 corejs
            "corejs": 3 // 也可配置成 2
          }
        ]
      ]
    }
    复制代码

`useBuiltIns`是`babel7`的新功能，这个配置提供了三个选项告诉`babel`该如何引入`polyfill`包：

### 2.1 usage ###

**代码中不用主动`import`**，`babel`会自动将代码里已使用到的且`browserslist`环境不支持的`polyfill`导入。

编译前：

const result = [1, 2, 3, 4, 5].copyWithin(0, 3)
    
    const instance = new Promise((resolve, reject) => {
      resolve(123)
    })
    复制代码

编译后：

"use strict";
    
    require("core-js/modules/es.array.copy-within.js");
    
    require("core-js/modules/es.object.to-string.js");
    
    require("core-js/modules/es.promise.js");
    
    var result = [1, 2, 3, 4, 5].copyWithin(0, 3);
    var instance = new Promise(function (resolve, reject) {
      resolve(123);
    });
    复制代码

### 2.2 entry ###

**需要在代码运行之前导入**，会将`browserslist`环境不支持的所有`polyfill`都导入。

编译前：

import "core-js/stable";
    import "regenerator-runtime/runtime";
    
    const result = [1, 2, 3, 4, 5].copyWithin(0, 3)
    
    const instance = new Promise((resolve, reject) => {
      resolve(123)
    })
    复制代码

编译后：

"use strict";
    
    require("core-js/modules/es.symbol.js");
    
    // ... 此处省略400+行代码
    
    require("regenerator-runtime/runtime");
    
    var result = [1, 2, 3, 4, 5].copyWithin(0, 3);
    var instance = new Promise(function (resolve, reject) {
      resolve(123);
    });
    复制代码

### 2.3 false ###

只做了语法转换，不会导入任何`polyfill`进来，并且`corejs`配置将无效。

编译前：

const result = [1, 2, 3, 4, 5].copyWithin(0, 3)
    
    const instance = new Promise((resolve, reject) => {
        resolve(123)
    })
    
    const shen = result?.a
    复制代码

编译后：

"use strict";
    
    var result = [1, 2, 3, 4, 5].copyWithin(0, 3);
    var instance = new Promise(function (resolve, reject) {
      resolve(123);
    });
    var shen = result === null || result === void 0 ? void 0 : result.a;
    复制代码

## 3. @babel/polyfill ##

`@babel/polyfill`是一个运行时包，主要是通过核心依赖`core-js@2`**来完成对应浏览器不支持的新的全局和实例`api`的添加**。在升级到`core-js@3`后，如果还要保留`@babel/polyfill`的使用，就要在`@babel/polyfill`中添加`core-js@2`和`core-js@3`切换的选项，这样`@babel/polyfill`中将包含`core-js@2`和`core-js@3`两个包，出于这个原因官方决定**弃用**`@babel/polyfill`。

关于`@babel/polyfill`有三点要说明：

1.  如果采用`@babel/preset-env`的`polyfill`方案是不需要`@babel/polyfill`的安装为前提，只需要安装`core-js`（`regenerator-runtime`会在安装`@babel/preset-env`的时候自动安装），然后通过设置`useBuiltIns`选项来开启对`api`的兼容性处理。
2.  当然，你也可以不依赖`@babel/preset-env`提供的处理`api`兼容性的能力，直接使用`@babel/polyfill`来处理。如果使用了`core-js@3`，则需要做如下的替换工作：

// before
    import "@babel/polyfill";
    
    // after
    import "core-js/stable";
    import "regenerator-runtime/runtime";
    复制代码

1.  网上有很多人认为`@babel/polyfill`除了有全局污染的缺点外，还会让不同的文件中包含重复的代码，增加编译后的体积。举个例子：

编译前：

const key = 'babel'
    const obj = {
      [key]: 'polyfill',
    }
    复制代码

编译后：

"use strict";
    
    function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
    
    var key = 'babel';
    
    var obj = _defineProperty({}, key, 'polyfill');
    复制代码

编译后的代码中插入了`_defineProperty`函数。的确，如果多个文件中使用了对象的属性名表达式，则会插入多个`_defineProperty`函数。但是，这件事情并不是`@babel/polyfill`这种`polyfill`方案实现的，而是`@babel/preset-env`本身在语法转换的时候，会使用一些辅助函数来实现一些语法的模拟。而事实的确，这只是一种语法转换。

## 4. @babel/runtime ##

在使用`@babel/preset-env`提供的语法转换和全局`api`添加的功能时，难免会造成文件的体积增加以及`api`的全局污染。为了解决这类问题，引入了`runtime`的概念，`runtime`的**核心思想是以引入替换的方式来解决兼容性问题**。

`runtime`包其实有三个：

*  \\@babel/runtime\[4\]
 *  \\@babel/runtime-corejs2\[5\]
 *  @babel/runtime-corejs3

`@babel/runtime`与`@babel/runtime-corejs2`类似，区别只是`@babel/runtime-corejs2`使用了`core-js@2`来处理全局`api`。所以接下来只阐述`@babel/runtime-corejs2`和`@babel/runtime-corejs3`的区别。

`@babel/runtime-corejs2`会从`core-js`中的`library`模块去加载对应的`runtime`代码：

// runtime-corejs2/core-js/array/from.js
    module.exports = require("core-js/library/fn/array/from");
    复制代码

`@babel/runtime-corejs3`会从`core-js-pure`这个包中去加载对应的`runtime`代码：

// runtime-corejs3/core-js/array/from.js
    module.exports = require("core-js-pure/features/array/from");
    复制代码

`@babel/runtime-corejs3`相比较`@babel/runtime-corejs2`最大的改变就是**可以模拟实例上的`api`**。

比如数组的`includes`方法，`@babel/runtime-corejs3`提供了模拟`api`，而`@babel/runtime-corejs2`没有：

import _includesInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/includes";
    
    _includesInstanceProperty(foo).call(foo, "a");
    复制代码

甚至，如果我们想在一个不支持`Promise`的环境下使用`Promise`，可以这样：

// @babel/runtime-corejs2
    // var _interopRequireDefault = require("@babel/runtime-corejs2/helpers/interopRequireDefault");
    // var _promise = _interopRequireDefault(require("@babel/runtime-corejs2/core-js/promise"));
    
    // @babel/runtime-corejs3
    var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
    var _promise = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/promise"));
    
    var instance = new _promise["default"](function (resolve, reject) {
      resolve(123);
    });
    复制代码

显然这样一个个手动导入很麻烦，这个时候我们就需要借助自动导入插件来帮助我们完成这项工作。

> `@babel/runtime`是`api`模拟方案的提供者，是项目生产依赖，而不是开发依赖，安装的时候不要使用`-D`

## 5. @babel/plugin-transform-runtime ##

`@babel/plugin-transform-runtime`就是为了方便`@babel/runtime`的使用。通过`ast`的分析，自动识别并替换代码中的新`api`，解决手动`require`的烦恼。

{
      "presets": [
        [
          "@babel/preset-env"
        ]
      ],
      "plugins": [
        [
          "@babel/plugin-transform-runtime",
          {
            "corejs": 3
          }
        ]
      ]
    }
    复制代码

`corejs`选项来配置使用的是`@babel/runtime-corejs2`还是`@babel/runtime-corejs3`。

编译前：

const result = [1, 2, 3, 4, 5].copyWithin(0, 3)
    
    const instance = new Promise((resolve, reject) => {
      resolve(123)
    })
    
    const key = 'babel'
    const obj = {
      [key]: 'polyfill',
    }
    复制代码

使用`@babel/runtime-corejs2`编译后：

"use strict";
    
    var _interopRequireDefault = require("@babel/runtime-corejs2/helpers/interopRequireDefault");
    
    var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs2/helpers/defineProperty"));
    
    var _promise = _interopRequireDefault(require("@babel/runtime-corejs2/core-js/promise"));
    
    var result = [1, 2, 3, 4, 5].copyWithin(0, 3);
    var instance = new _promise["default"](function (resolve, reject) {
      resolve(123);
    });
    var key = 'babel';
    var obj = (0, _defineProperty2["default"])({}, key, 'polyfill');
    复制代码

使用`@babel/runtime-corejs3`编译后：

"use strict";
    
    var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
    
    var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
    
    var _copyWithin = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/copy-within"));
    
    var _promise = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/promise"));
    
    var _context;
    
    var result = (0, _copyWithin["default"])(_context = [1, 2, 3, 4, 5]).call(_context, 0, 3);
    var instance = new _promise["default"](function (resolve, reject) {
      resolve(123);
    });
    var key = 'babel';
    var obj = (0, _defineProperty2["default"])({}, key, 'polyfill');
    复制代码

可以看到，使用`@babel/runtime-corejs3`可以模拟数组上的`copyWithin`方法，而`@babel/runtime-corejs2`则不能。

> `@babel/plugin-transform-runtime`则是开发依赖，编译时负责处理`@babel/runtime`，两者是搭配使用的。

## 6. 总结 ##

目前，`babel`处理兼容性问题有两种方案：

1.  `@babel/preset-env` \+ `corejs@3`实现语法转换 + 在全局和实例上添加`api`，支持全量加载和按需加载，我们简称`polyfill`方案；
2.  `@babel/preset-env` \+ `@babel/runtime-corejs3` \+ `@babel/plugin-transform-runtime`实现语法转换 + 模拟替换`api`，只支持按需加载，我们简称`runtime`方案。

两种方案都依赖核心包`corejs@3`，只不过依赖的模块不同，导致实现方式不同。两种方案各有优缺点：

1.  `polyfill`方案很明显的缺点就是会造成全局污染，而且会注入冗余的工具代码；优点是可以根据浏览器对新特性的支持度来选择性的进行兼容性处理；
2.  `runtime`方案虽然解决了`polyfill`方案的那些缺点，但是不能根据浏览器对新特性的支持度来选择性的进行兼容性处理，也就是说只要在代码中识别到的`api`，并且该`api`也存在`core-js-pure`包中，就会自动替换，这样一来就会造成一些不必要的转换，从而增加代码体积。

所以，`polyfill`方案比较适合单独运行的业务项目，如果你是想开发一些供别人使用的第三方工具库，则建议你使用`runtime`方案来处理兼容性方案，以免影响使用者的运行环境。

关于本文

# 来源：PandlyShen #

https://juejin.cn/post/6976501655302832159

## 最后 ##

欢迎关注【前端瓶子君】✿✿ヽ(°▽°)ノ✿

回复「算法」，加入前端编程源码算法群，每日一道面试题（工作日），第二天瓶子君都会很认真的解答哟！

回复「交流」，吹吹水、聊聊技术、吐吐槽！

回复「阅读」，每日刷刷高质量好文！

如果这篇文章对你有帮助，「在看」是最大的支持

》》面试官也在看的算法资料《《

“在看和转发”就是最大的支持

[453ee70ff02c0ad2c3c8b23cfd78bd2e.png]: /images/20220829/681176d1c25744d4a97f934dd842994c.png
[6044e7333ee0e15658d7e55934254338.png]: /images/20220829/26fd4c9d25bb4d9c94faae5307397219.png