在前端开发中，我们经常需要使用一些新的 JavaScript 语言特性或者 API，但是这些特性或者 API 并不是所有浏览器都支持。为了解决这个问题，我们可以使用 @babel/polyfill 这个库来帮助我们兼容不同的浏览器。
@babel/polyfill 是一个 JavaScript 库，它可以模拟 ES2015+ 的环境，并且提供了一些新的 API。但是，当我们在项目中引入 @babel/polyfill 时，它会将所有的 polyfill 都加载进来，这样会导致我们的应用程序变得非常臃肿，影响性能。
为了解决这个问题，我们可以使用自定义按需加载的方式来使用 @babel/polyfill。下面是具体的实现步骤。
步骤一：安装 @babel/polyfill
我们首先需要安装 @babel/polyfill，可以使用 npm 或者 yarn 进行安装。
npm install @babel/polyfill
yarn add @babel/polyfill
步骤二：创建一个自定义的 polyfill 文件
我们可以在项目中创建一个自定义的 polyfill.js 文件，来存放我们需要的 polyfill。
// polyfill.js import "core-js/stable"; import "regenerator-runtime/runtime"; import "whatwg-fetch";
在这个文件中，我们可以按照自己的需求来选择需要的 polyfill。在这个示例中，我们使用了 core-js、regenerator-runtime 和 whatwg-fetch 这三个 polyfill。
步骤三：在入口文件中引入自定义的 polyfill 文件
我们需要在项目的入口文件中引入自定义的 polyfill 文件，来确保它们被加载。
// index.js import "./polyfill";
步骤四：使用 @babel/preset-env 配置
我们需要使用 @babel/preset-env 来配置 @babel/polyfill 的按需加载。在项目的 .babelrc 文件中，我们可以添加以下配置。
-- -------------------- ---- -------
-
---------- -
-
--------------------
-
-------------- --------
--------- -------
-
-
-
-在这个配置中，我们使用了 useBuiltIns 选项，并将它的值设置为 usage。这个选项告诉 @babel/preset-env 仅仅将我们需要的 polyfill 加载进来。
我们还需要设置 corejs 选项，来指定 core-js 的版本。在这个示例中，我们使用了 core-js 3.0.0 版本。
示例代码
下面是一个完整的示例代码，它演示了如何使用 @babel/polyfill 自定义按需加载。
-- -------------------- ---- -------
-- -----------
------ -----------------
------ ------------------------------
------ ---------------
-- --------
------ -------------
-- --------
-
---------- -
-
--------------------
-
-------------- --------
--------- -------
-
-
-
-总结
通过自定义按需加载 @babel/polyfill，我们可以避免加载不必要的 polyfill，提高应用程序的性能。同时，这也是一种很好的实践，可以帮助我们更好地理解和掌握 @babel/polyfill 的使用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66091152d10417a22278b2b5