2024年最新的babel兼容性实现方案"presets": [ ["@babel/preset-env"] ] } 除

"presets": [

["@babel/preset-env"]

]

}

除了语法转换，@babel/preset-env另一个重要的功能是**「对api的处理，也就是在代码中引入polyfill」。@babel/preset-env主要是依赖core-js来处理api的兼容性，所以需要事先安装core-js。当设置了useBuiltIns选项（不为false）时，就会使用core-js来对api进行处理。@babel/preset-env在升级到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都导入。这样babel就只会在入口处导入所有polyfill，不会在代码再单独添加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有三点要说明：

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

// before

import "@babel/polyfill";

// after

import "core-js/stable";

import "regenerator-runtime/runtime";

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

编译前：

const key = 'babel'

const obj = {

}

编译后：

"use strict";

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { objkey = 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 = {

}

使用@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处理兼容性问题有两种方案：

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

两种方案一个依赖核心包core-js，一个依赖核心包core-js-pure，两种方案各有优缺点：