2024年最新的babel兼容性实现方案_structuredclone babel 解决兼容性-优快云博客

本文链接：https://blog.youkuaiyun.com/2401_89192142/article/details/145045761

“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，两种方案各有优缺点：

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

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

关于本文

作者：PandlyShen

https://juejin.cn/post/6976501655302832159