什么是 Babel-polyfill
Babel-polyfill 是一个用于在旧版本浏览器中模拟 ES2015+ 环境的 JavaScript 库。它包含了 regenerator-runtime 和 core-js 库的代码，因此可以模拟出 Promises、Symbols、模版字符串、对象方法等 ES2015+ 的语法特性。
Babel-polyfill 的作用
在现代前端开发中，开发者们利用 ES6/7 的高级语法来提升代码的可读性、可维护性和性能。然而，这些高级语法特性并不被所有版本的浏览器所支持。这就导致了在旧版本浏览器上运行的代码可能无法正常运行，这就是所谓的“兼容性”问题。
Babel-polyfill 解决了这个问题。它为浏览器提供了缺失的 JS API，从而使开发者可以在旧版浏览器上运行 ES2015+ 代码。
Babel-polyfill 的使用方法
安装 Babel-polyfill
在使用 Babel-polyfill 之前，需要先使用 npm 或 yarn 安装它。在命令行中，输入以下命令：
npm install --save @babel/polyfill
如果你使用的是 yarn，可以使用以下命令：
yarn add @babel/polyfill
引入 Babel-polyfill
在你的 JavaScript 代码中，你需要引入 Babel-polyfill。你可以在入口文件（通常是 index.js 或 app.js）中添加以下代码：
import '@babel/polyfill';
如果你使用的是 CommonJS 规范，你可以按照以下方式引入 Babel-polyfill：
require('@babel/polyfill');配置 Babel-polyfill
为了使用 Babel-polyfill，你需要在你的项目中使用 Babel。你可以使用 @babel/preset-env，该 preset 会自动添加 Babel-polyfill，并基于浏览器的兼容性目标，只添加必要的 polyfills。
使用 Babel 的配置文件 .babelrc，可以添加以下配置：
-- -------------------- ---- -------
-
---------- -
-
--------------------
-
---------- -
----------- ------ - ---------- --- -- ----
-
-
-
-
-在以上配置中，我们指定了目标浏览器的兼容性要求：最近两个版本的浏览器以及兼容 IE 11。
示例代码
下面是一个简单的示例，使用了 Babel-polyfill 的一些 ES6+ 语法。
import '@babel/polyfill';
const demo = async () => {
const value = await Promise.resolve('Hello, world!');
console.log(value);
};
demo();在上面的示例中，我们使用了 async/await 以及 Promise.resolve。这两个语法特性在旧版本的浏览器中并不被支持，但是由于引入了 Babel-polyfill，该代码可以在旧版浏览器中正常运行。
结论
Babel-polyfill 扩展一些 ES6/7 的语法特性，让你在旧版本浏览器中使用新特性，并帮助你解决兼容性问题。我们建议你使用 Babel-polyfill 和 @babel/preset-env 轻松掌握 ES6/7 的高级语法特性，让你的前端代码更加现代化。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/675127348bd460d3ad8700e4