Polyfill 是一种用于实现浏览器缺失特性的 JavaScript 代码，通过在浏览器中注入 Polyfill 可以使得浏览器支持更多的 ES6+ 语法特性。在前端开发中，我们经常需要使用 Polyfill 来兼容不同浏览器对新特性的支持情况，而 Babel 是一款广泛使用的 JavaScript 编译器，可以将 ES6+ 代码转换为向后兼容的 ES5 代码，同时也支持使用 Polyfill 来实现浏览器不支持的特性。
本文将详细介绍如何在 Babel 中使用 Polyfill，包括 Polyfill 的安装和配置以及在代码中使用 Polyfill 的示例。
安装和配置 Polyfill
在使用 Polyfill 之前，我们需要先安装对应的 Polyfill 库。常见的 Polyfill 库包括 core-js、babel-polyfill 等。在本文中，我们将以 core-js 为例进行介绍。
首先，我们需要安装 core-js：
npm install --save core-js
安装完成后，在 Babel 的配置文件 .babelrc 中添加如下配置：
{
"presets": [
["@babel/preset-env", {
"useBuiltIns": "usage",
"corejs": 3
}]
]
}上述配置中，useBuiltIns 选项用于指定使用哪种方式引入 Polyfill，usage 表示按需引入，只会引入代码中用到的 Polyfill；corejs 选项用于指定使用哪个版本的 core-js，这里我们使用版本 3。
在代码中使用 Polyfill
安装和配置完成后，我们就可以在代码中使用 Polyfill 了。以 Promise 为例，我们可以在代码中直接使用 Promise，而不用担心浏览器是否支持该特性。Babel 会自动根据配置引入对应的 Polyfill。
-- -------------------- ---- -------
----- ------- - --- ----------------- ------- -- -
------------- -- -
----------------
-- ------
---
-------------------- -- -
-------------------
---上述代码中，我们使用了 ES6 的 Promise 特性，Babel 会根据配置自动引入对应的 Polyfill。
除了直接使用 ES6 特性外，我们还可以使用 import 语句引入对应的 Polyfill，这样可以更加精确地控制 Polyfill 的引入。
-- -------------------- ---- -------
------ ---------------------------
----- ------- - --- ----------------- ------- -- -
------------- -- -
----------------
-- ------
---
-------------------- -- -
-------------------
---上述代码中，我们使用 import 语句引入了 Promise 的 Polyfill，这样可以确保只引入我们需要的 Polyfill，避免引入过多无用的 Polyfill。
总结
通过本文的介绍，我们了解了如何在 Babel 中使用 Polyfill，包括安装和配置 Polyfill 以及在代码中使用 Polyfill 的示例。在实际开发中，我们经常需要使用 Polyfill 来兼容不同浏览器对新特性的支持情况，因此掌握如何使用 Polyfill 是非常重要的。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65534574d2f5e1655dd011c6