在 Web 开发中，我们经常会遇到浏览器兼容性的问题，在这种情况下，我们需要使用 polyfills（也叫填充物）。Polyfills 是在旧版浏览器上模拟新浏览器原生支持的特性的 JavaScript 代码。通过使用 Polyfills，我们可以使代码在所有浏览器上都能够运行。
Polyfills 现在已经成为了前端工程中必不可少的一部分。而使用 npm 包作为管理工具，可以更方便地使用 Polyfills。在本篇文章中，我将详细介绍如何使用 npm 包中的 Polyfills。
安装 npm 包
首先，我们需要安装一个 npm 包，以便我们能够使用常见的 Polyfills。core-js 是一个非常流行的 npm 包，它是一个精密、模块化的 JavaScript 标准库。在本教程中，我将使用它作为例子。
--- ------- ------ -------
引用 Polyfills
在安装完成 core-js 后，我们需要将其引用到我们的 JavaScript 代码中。
------ ---------- -- ---- --------- ------ ----------------- -- ----- ---------- --- ---------
在上面的代码中，我们分别引用了全部的 Polyfills 和新的 ECMAScript 特性的 Polyfills。如果只需要使用部分特性，我们可以在引用时指定需要的特性。例如：
------ ----------------- -- -- --- - ---------
通过这种方式，我们可以避免将整个库的 Polyfills 引用到我们的项目中，仅引用我们需要的特性。这样有利于减小项目的体积并提高加载速度。
示例代码
下面是一个使用 Polyfills 的示例代码：
------ -----------------
------ ------------------------------
----- -------- ----- -
----- ------------------------
----- --- - --- -- ---
------------------ -- -------------------
----- --- - --- -------- ------- --- ------- --- -----------
--- ------ ----- ------ -- ---- -
-------------------- -----------
-
-
------在上面的代码中，我们使用了 core-js/stable 引用了新的 ECMAScript 特性的 Polyfills。在 foo 函数中，我们使用了 Promise，Array 的 forEach 方法和 Map，这些在旧版浏览器上可能不被支持。
在 async 函数中，我们还引用了另一个 npm 包 regenerator-runtime。它是一个用于异步函数的生成器运行时 Polyfills。在引用它之后，我们就可以在 async 函数中使用 await 了。
结论
在本篇文章中，我们介绍了如何使用 npm 包中的 Polyfills。通过使用 Polyfills，我们可以使代码在所有浏览器上都能够运行。在选择 npm 包时，我们需要选择一个适合自己项目的库，并遵循最佳实践来使用它。
如果您想了解更多有关 Polyfills 的信息，请查看 MDN 的 Polyfills 文档。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/74941