Polyfill 是什么？它是为了让旧版本的浏览器能够支持新的 ECMAScript 语法而存在的一个 JavaScript 库。Babel 是一个非常流行的 JavaScript 编译工具，它可以将 ES6/ES7/ES8 语法编译成 ES5 可运行的 JavaScript 代码。在这篇文章中，我们将介绍如何正确配置 Babel Polyfill。
什么是 Babel Polyfill？
Babel Polyfill 是一个 JavaScript 库，它在代码运行之前，自动检测浏览器对 ES6/ES7/ES8 的支持情况，并提供必要的 Polyfill，使代码在这些旧版本的浏览器上可以正常运行。
如果你使用的是 Babel 7.x 版本，那么它已经内置了 core-js 和 regenerator-runtime Polyfill，所以你不必单独安装，只需要在配置文件中正确设置就可以了。
Babel Polyfill 配置
在使用 Babel Polyfill 之前，你需要先安装它：
npm install --save @babel/polyfill
然后在你的代码入口文件中引入它：
import '@babel/polyfill';
或者在 HTML 页面中引入：
<script src="./node_modules/@babel/polyfill/dist/polyfill.js"></script>
但是，这样做会将整个 Polyfill 都打包进入你的应用程序中，这可能会增加应用程序体积。为了避免这种情况，你可以使用以下方法在应用程序中按需加载所需的 Polyfill：
方法一：使用「usage」选项
使用「usage」选项可以自动检测代码中使用到的 ES6/ES7/ES8 语法，并按需添加相应的 Polyfill。这是我们推荐的做法。
首先，安装 @babel/plugin-transform-runtime：
npm install --save-dev @babel/plugin-transform-runtime
然后，在 .babelrc 文件中配置「plugins」选项：
-- -------------------- ---- -------
-
---------- -
-
----------------------------------
-
--------- --
--------------- ----
-
-
-
-其中，"corejs": 3 表示使用 core-js@3，"useESModules": true 表示使用 ES Modules。
最后，在入口文件顶部引入 @babel/polyfill：
import '@babel/polyfill';
方法二：手动导入 Polyfill
如果你不想使用「usage」选项，你可以手动导入所需的 Polyfill。
首先，在 .babelrc 文件中设置「corejs」选项：
-- -------------------- ---- -------
-
---------- -
-
--------------------
-
--------- --
-------------- -----
-
-
-
-其中，"corejs": 3 表示使用 core-js@3。
然后，在需要使用到新语法的文件中手动导入相应的 Polyfill：
import 'core-js/features/array/from'; import 'core-js/features/array/flat-map'; // ...
结论
Babel Polyfill 是在旧版本的浏览器中实现新的 ECMAScript 语法的一种解决方案。根据你的代码和应用程序的需求，你可以按需加载所需的 Polyfill，以减少应用程序体积。使用 Babel Polyfill 库时，请记得正确配置相应选项，以确保它能够正确工作。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67497797a1ce00635460f9ba