在现代网络应用程序中，跨浏览器和跨设备的兼容性已经成为一个很大的问题。尽管不同的浏览器和设备都能支持 ES6+ 的语言特性，但是有时候还需要使用 Polyfills 来使一些旧浏览器支持这些特性。在本文中，我们将介绍如何在 Babel 中使用 Polyfills 来提高应用程序的可兼容性。
什么是 Polyfills？
Polyfills 是在旧浏览器中提供新的函数定义的 JavaScript 代码。它通过模拟新功能的行为来使旧的浏览器能够使用新的 API。 Polyfills 可以模拟 ECMAScript 协议中的任何新功能，例如功能字符串，类， Promise，Set 和 Map 等。可以将 Polyfills 想象为工具，用于为旧版浏览器添加缺失的功能，以便应用程序能够在所有浏览器上执行。
Babel 和 Polyfills
Babel 是一个 JavaScript 编译器，它可以将 ES6+ 代码转换为向后兼容的 JavaScript，以便支持旧版浏览器。 Babel 的主要优势是它可以提供对新语法的语法转换，但是转换后的代码仍然需要 Polyfills 来支持 API（Application Programming Interface）。 如果需要让 ES6+ 的代码在运行时在旧版浏览器上运行，则需要在 Babel 中使用这些 Polyfills。
在 Babel 中使用 Polyfills 有两个步骤：
- 安装需要的 Polyfills：
可以使用以下命令安装所需的 Polyfills：
npm install --save @babel/polyfill
- 将安装的 Polyfills 加载到应用程序中：
在 JavaScript 应用程序中，您需要确保在任何其他代码之前导入这个库。使用以下代码：
import "@babel/polyfill";
现在，您的 JavaScript 应用程序应该在所有浏览器中正常工作，包括旧版浏览器。
示例代码
以下示例演示如何使用 Babel 和 Polyfills。
index.js
[1, 2, 3].forEach((item) => console.log(item))
webpack.config.js
-- -------------------- ---- -------
-------------- - -
------ -
---- ------------
--
------- -
----- ----------------------- --------
--------- ------------------
--
------- -
------ -
-
----- --------
-------- ----------------------------------
---- -
------- ---------------
-------- -
-------- ---------------------
-
-
-
-
-
--package.json
-- -------------------- ---- -------
-
------- ----------------
---------- --------
-------------- ---
------- -----------
---------- -
-------- ---------
--
----------- ---
--------- ---
---------- ------
--------------- -
------------------ ---------
--
------------------ -
-------------- ----------
-------------------- ----------
--------------- ---------
---------- ----------
-------------- ---------
-
-现在，在运行 webpack 命令后，在 dist/app.bundle.js 文件中可以看到包含 Polyfills 的代码。该文件可以在任何浏览器中正常运行，包括旧版浏览器，而不会出现语法错误。
Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/67d7d392a941bf7134e016b8