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。
// javascriptcn.com 代码示例
const promise = new Promise((resolve, reject) => {
setTimeout(() => {
resolve('done');
}, 1000);
});
promise.then((value) => {
console.log(value);
});上述代码中，我们使用了 ES6 的 Promise 特性，Babel 会根据配置自动引入对应的 Polyfill。
除了直接使用 ES6 特性外，我们还可以使用 import 语句引入对应的 Polyfill，这样可以更加精确地控制 Polyfill 的引入。
// javascriptcn.com 代码示例
import 'core-js/features/promise';
const promise = new Promise((resolve, reject) => {
setTimeout(() => {
resolve('done');
}, 1000);
});
promise.then((value) => {
console.log(value);
});上述代码中，我们使用 import 语句引入了 Promise 的 Polyfill，这样可以确保只引入我们需要的 Polyfill，避免引入过多无用的 Polyfill。
总结
通过本文的介绍，我们了解了如何在 Babel 中使用 Polyfill，包括安装和配置 Polyfill 以及在代码中使用 Polyfill 的示例。在实际开发中，我们经常需要使用 Polyfill 来兼容不同浏览器对新特性的支持情况，因此掌握如何使用 Polyfill 是非常重要的。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65534574d2f5e1655dd011c6