为了让我们的网站能够在各种浏览器上都能正常运行，我们需要使用许多不同的 polyfills。但是每个浏览器都有它自己的一套 polyfills，这使得我们需要编写很多额外的代码来节省这些浏览器的特殊处理。这就是为什么我们需要使用 npm 包 compat-polyfills 的原因。
什么是 compat-polyfills？
compat-polyfills 是一个 npm 包，它为您提供了一组完整的 polyfills，可以用于覆盖不同浏览器之间的功能差异，这意味着您可以使用最新的 ECMA2015+ 代码，而不必担心无法在某些浏览器上运行。
如何使用 compat-polyfills？
首先，您需要安装 compat-polyfills。您可以通过下面的命令进行安装：
npm install compat-polyfills --save
然后，在您的代码中导入 compat-polyfills：
import 'compat-polyfills';
最后，你需要将你的代码转换成ES5。你可以使用 Babel 来完成这一操作。
npm install @babel/core babel-loader @babel/preset-env webpack --save-dev
然后，在你的 webpack.config.js 文件中添加以下配置：
-- -------------------- ---- -------
-------------- - -
------- -
------ -
-
----- --------
-------- ---------------
---- -
------- ---------------
-------- -
-------- ---------------------
-
-
-
-
-
--示例代码
现在，让我们来看一下以下示例代码：
const array = [1, 2, 3, 4]; const result = array.reduce((acc, cur) => acc + cur); console.log(result);
这段代码使用 reduce() 方法来计算给定数组中所有元素的总和。在某些浏览器中，可能没有 reduce() 方法，或者它的用法可能略有不同。
但是，如果您使用 compat-polyfills，您可以安全地使用最新的 reduce() 函数，而不必担心它在某些浏览器上无法运行。
结论
使用 compat-polyfills 可以使您的前端开发工作更加轻松和高效。通过使用这个 npm 包，你不必担心你的网站在不同的浏览器上无法运行，同时你也可以使用最新的 ECMA2015+ 代码来提高效率，并最终提供更好的用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f2cd79d3b0ab45f74a8bbb4