在讨论 Babel Polyfill 之前，我们需要了解一下 JavaScript 的一些基础概念。当我们在浏览器中使用新的 ECMAScript 标准时，一些浏览器可能无法识别新的语法，这就需要使用一个工具来转换这些语法。
Babel 是一个 JavaScript 编译器，可以将新的 ECMAScript 代码转换成浏览器可识别的代码。Babel Polyfill 则是一个工具，可以帮助我们在运行时填充浏览器缺失的特性。
安装 Babel Polyfill
我们可以使用 npm 来安装 Babel Polyfill：
npm install --save @babel/polyfill
在安装完成后，我们需要在入口文件中引入：
import "@babel/polyfill";
什么是 Babel Polyfill
Babel Polyfill 实际上是一个 JavaScript 库，它包含了一些新的 ECMAScript 特性和方法的实现，在我们使用这些特性和方法时，会自动填充浏览器缺失的实现。这种填充方式称之为“垫片”（polyfill）。
我们使用这些特性的方式与原生 JavaScript 代码没有什么不同。例如，我们可以使用 Promise 和 async/await 语法：
async function fetchData() {
try {
const response = await fetch('https://api.github.com/users/octocat');
const data = await response.json();
console.log(data);
} catch (error) {
console.error(error);
}
}以上的代码使用了 Promise 和 async/await 语法，这些语法是基于新的 ECMAScript 标准实现的。在某些浏览器上，这些特性可能无法使用，而 Babel Polyfill 会为我们填充这些特性的实现。
使用 Babel Polyfill
在早期的版本中，我们需要在 .babelrc 中配置 polyfill，例如：
{
"presets": [
[
"@babel/preset-env",
{
"useBuiltIns": "usage",
"targets": {
"browsers": ["last 2 versions", "safari >= 7"]
}
}
]
]
}然而，在版本 7.4.0 中，Babel 官方宣布使用 core-js 和 regenerator-runtime 作为默认的 polyfill 实现，我们只需要在入口文件中引入 Babel Polyfill 即可：
import "@babel/polyfill";
在使用 Babel Polyfill 时，我们需要注意一些问题：
- Babel Polyfill 是非常大的，如果在项目中使用了大量的 ECMAScript 特性，建议使用按需加载，或者使用策略缩减 polyfill；
- Babel Polyfill 可能会在全局中定义一些全局变量和方法，例如 Promise 和 Map，这些变量和方法可能会影响全局作用域，从而影响到其他代码的运行。
Babel Polyfill 示例
下面是一个使用 Babel Polyfill 的简单示例：
import "@babel/polyfill";
const myArray = [1, 2, 3];
const mySet = new Set(myArray);
if (mySet.has(2)) {
console.log("Set has item 2");
}以上的代码使用了 Set 和 includes 方法，这些方法是基于新的 ECMAScript 标准实现的。在一些浏览器上，这些特性可能无法使用，而 Babel Polyfill 会为我们填充这些特性的实现。
总结
在本篇文章中，我们简单介绍了 Babel Polyfill 的基础概念和基本使用方法。使用 Babel Polyfill，我们可以在浏览器中使用新的 ECMAScript 标准，即使在一些浏览器上，这些特性并不可用。使用策略缩减 polyfill 是推荐的使用方式，可以避免 polyfill 对全局作用域的影响。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65a01457add4f0e0ff886271