在前端开发中，我们常常会遇到一些跨浏览器兼容性问题，特别是一些 ES6 或者新 API 在老版本浏览器中不支持的情况下。而 polyfills 就是帮助我们解决这个问题的工具。Polyfills 实际上是一段代码，它用来模拟浏览器中原生对象和函数的 API，让新特性可以在老版本浏览器中使用。
Polyfills 都有一个共同的问题，就是会增加浏览器的加载时间，所以一般情况下我们只会在必要的情况下才会使用它们。现在我们可以使用 npm 包 polyfills-loader 来帮助我们自动引入需要的 polyfills。
安装 polyfills-loader
安装 polyfills-loader 很简单，只需要在命令行中输入：
npm install polyfills-loader --save-dev
在项目中使用 polyfills-loader 最简单的方法是通过使用 webpack 打包。在 webpack 配置中配置 polyfills-loader：
-- -------------------- ---- -------
-------------- - -
-- ---
------- -
------ -
-- ---
-- -- ----------------
-
----- --------
---- -
------- -------------------
-------- -
-- ------- ---------
---------- -
-- --------- ---------
----------
-------
-
-
-
-
-
-
-在上面的代码中，我们通过 rules 配置来匹配所有需要加载 polyfills 的 JavaScript 文件，并通过 use 配置添加 polyfills-loader。在 options 中，我们可以设置需要加载的 polyfills。
使用 polyfills-loader
使用 polyfills-loader 很简单，只需要引入你的 JavaScript 文件即可。在这里，我们可以通过一个示例了解它的具体用法。
我们假设有一个 JavaScript 文件 app.js，它使用了 Promise 和 fetch。在老版本的浏览器中，这个 app.js 文件是无法正常运行的。但是我们可以通过 polyfills-loader 来自动引入所需的 polyfills。
下面是 app.js 的代码：
// app.js
fetch('https://jsonplaceholder.typicode.com/todos/1')
.then(response => response.json())
.then(json => console.log(json))
.catch(error => console.log('Error', error));如果浏览器不支持 fetch，那么这段代码将无法正常运行。接下来，我们可以通过 polyfills-loader 自动引入所需的 polyfills。
在服务端，我们可以通过以下代码来运行 app.js：
// 通过 webpack 和 polyfills-loader 来打包 app.js
const webpack = require('webpack');
const config = require('./webpack.config.js');
const compiler = webpack(config);
compiler.run((err, stats) => {
console.log('app.js is built');
});在客户端，我们只需要将 app.js 打包之后的代码引入页面即可：
<!-- 引入打包好的 JavaScript 文件 --> <script src="dist/app.js"></script>
通过使用 polyfills-loader，我们可以避免在浏览器中手动引入需要的 polyfills，从而提高开发效率。
总结
本文介绍了如何使用 npm 包 polyfills-loader 来自动引入我们需要的 polyfills。这个工具可以帮助我们解决跨浏览器兼容性问题，并提高开发效率。在使用时，我们需要配置需要加载的 polyfills，并将 polyfills-loader 添加到 webpack 配置中。希望本文对大家学习 polyfills 有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5effb99f403f2923b035bc3a