在现代的前端开发中，我们经常会用到一些新的 JavaScript 语法，例如箭头函数、模板字符串、解构赋值、await/async 等等。尽管这些语法使得我们的代码更加简洁易读，但是由于一些老的浏览器并不支持这些新语法，我们需要通过 Babel 进行转译，并在需要的地方手动引入 polyfill 来实现兼容性。
本篇文章将着重介绍如何正确配置 Babel 的 polyfill，以便我们能够安心地使用 ES9 语法。
为什么需要 polyfill
在现代前端开发中，我们希望代码可以运行在尽可能多的浏览器上，包括一些老旧的浏览器。为了实现这一目标，我们需要使用 Babel 进行转译。
转译是指将新语法转换为老语法，使得浏览器可以正常运行这段代码。例如，将箭头函数转换为普通函数：
-- --- -- ----- --- - --- -- -- - - -- -- ---- --- -- --- --- - ----------- -- - ------ - - -- --
然而，有些新语法需要依赖一些新的原生 API 或类库来实现，例如 Promise、Set、Map、Array.includes 等等。这些新的 API 在老的浏览器中是不存在的，要使用这些 API 就需要手动引入 polyfill。
polyfill 是指一段代码，用来实现浏览器不支持的某个 API 或特性。当浏览器不支持某个新特性时，polyfill 可以模拟这个特性的行为，达到支持的效果。
如何引入 polyfill
Babel 提供了一个 @babel/polyfill 模块，用来实现新 API 的兼容性。这个模块会在全局对象中添加许多新的方法和属性，使得浏览器能够支持 ES6 和 ES7 的新 API。
你可以通过在代码的入口处引入 @babel/polyfill 模块来自动添加这些新的方法和属性。例如，在 index.js 的顶部添加以下代码：
------ ------------------
这样就可以自动引入 polyfill，从而实现新 API 的兼容性。
然而，在实际的开发中，我们并不需要引入所有的 polyfill。由于 @babel/polyfill 模块包含着所有的新 API 的兼容实现，因此引入过多的 polyfill 会导致代码体积庞大、加载时间变长，降低页面性能。
在开发中，我们应该尽可能只引入已经用到的新特性的 polyfill。这可以通过配置 Babel 的 useBuiltIns 选项来实现。
使用 useBuiltIns 选项
useBuiltIns 选项用来控制 polyfill 的引入方式。默认情况下，Babel 不会检查项目中使用的新 API，而是直接引入所有的 polyfill。
我们可以配置 useBuiltIns 选项，使得 Babel 只引入代码中实际使用到的新 API 的 polyfill。这可以通过设置 useBuiltIns 为 entry、usage 或 false 来实现。这三个值的含义如下：
entry：Babel 会根据代码中实际使用到的新 API 引入对应的 polyfill。这需要手动在代码入口处引入@babel/polyfill模块。usage：Babel 会根据代码中实际使用到的新 API 引入对应的 polyfill，但不需要手动引入@babel/polyfill模块。false：Babel 不会自动引入 polyfill。这需要手动引入或在运行环境中提供这些新 API 的实现。
下面，我们将逐一介绍这三种引入方式的配置方法。
entry
使用 entry 配置方式需要手动在代码入口处引入 @babel/polyfill 模块：
------ ------------------
这会导致所有的 polyfill 被引入，包括我们目前没有使用到的。
因此，我们需要在 .babelrc 文件中配置 useBuiltIns 选项为 entry，以便移除不必要的 polyfill。
-
---------- -
-
--------------------
-
-------------- --------
--------- -
-
-
-
-corejs 选项指定使用的 polyfill 版本。如果你在代码中使用了新 API，但不确定它们属于 ES6 还是 ES7，可以设置 corejs 选项为 2 或 3，Babel 会根据 API 的版本引入相应的 polyfill。
usage
使用 usage 配置方式可以自动检测代码中实际使用到的新 API，并引入相应的 polyfill。这样，我们无需手动在代码中或配置文件中引入 @babel/polyfill 模块，它会在代码中自动注入所需的 polyfill。
我们可以像之前一样，在 .babelrc 文件中配置 useBuiltIns 选项为 usage：
-
---------- -
-
--------------------
-
-------------- --------
--------- -
-
-
-
-这样，Babel 将会自动为我们添加所需的 polyfill。
false
如果你不希望使用 Babel 自动引入 polyfill，可以将 useBuiltIns 选项设置为 false。这需要手动引入或在运行环境中提供这些新 API 的实现。
重要提示：如果你选择不使用 Babel 的 polyfill 特性，那么那些浏览器不支持的新 API，将无法在你的代码中使用！你需要手动引入第三方类库或自行实现这些 API 的兼容性。
总结
在现代前端开发中，我们需要使用 Babel 进行转译，以便在老的浏览器中实现新语法的兼容性。
Babel 提供了 @babel/polyfill 模块，用来实现新 API 的兼容性。我们可以配置 useBuiltIns 选项，使得 Babel 只引入代码中实际使用到的新 API 的 polyfill。
有了正确的 polyfill 配置，我们就可以安心地使用 ES9 语法，无需担心浏览器的兼容性问题。
如果你对 polyfill 的使用还有疑问，可以参考下面的示例代码，逐步学习如何使用。
示例代码
现在我们来编写一个 JavaScript 代码块，用来演示如何使用 Babel 的 polyfill。代码块实现了一个求和函数，使用到了 ES6 和 ES9 的语法：
----- --- - --- -- -- - ------ - - -- -- ----- -------- - --- -- -- - ------ - - -- -- ----- --- - --- -- --- ----- ---------- - ---------------- ----- ---- - ----- -- -- - ----- ------ - ----- ----------------------- --------- -------------------- --
我们可以通过以下步骤来实现这个代码块的 polyfill：
创建一个空白项目：
----- ------------------- -- ------------------- --- ---- --
安装 @babel/cli、@babel/core 和 @babel/preset-env：
--- ------- ---------- ---------- ----------- -----------------
创建 .babelrc 文件并添加 @babel/preset-env 配置：
-
---------- -
-
--------------------
-
-------------- --------
--------- -
-
-
-
-需要注意，corejs 选项指定使用的 polyfill 版本。Babel 7.4.0+ 推荐 corejs@3，Babel 6.x 使用 corejs2。
创建 index.js 文件并添加示例代码：
----- --- - --- -- -- - ------ - - -- -- ----- -------- - --- -- -- - ------ - - -- -- ----- --- - --- -- --- ----- ---------- - ---------------- ----- ---- - ----- -- -- - ----- ------ - ----- ----------------------- --------- -------------------- --
使用 @babel/cli 来转换代码：
--- ----- -------- ---------- -------------
生成的转换后的代码在 dist/index.js 文件中：
---- --------
------------------------------------------------
--------------------------------------------------
-----------------------------------------
-------------------------------------------------
--- --- - -------- ------ -- -
------ - - --
--
--- -------- - -------- ----------- -- -
------ - - --
--
--- --- - --- -- ---
--- ---------- - ----------------
--- ---- - -------- -- -
--- ----- - ------------------
-------------------------------- --------- -
--- -------
------ -------------------------------- -------------- -
----- --- -
------ ---------- - ---------- -
---- --
--------- - --
------ ----------------------- ---------
---- --
------ - ----------
--------------------
---- --
---- ------
------ ------------
-
-
-- ---------
----
------ -------- ------ -
------ ----------------- -----------
--
----
-------可以看到，Babel 自动根据代码中使用的新 API 引入了对应的 polyfill，这样代码就可以在老的浏览器中运行了。
希望这篇文章对你了解 Babel 的 polyfill 特性有所帮助！
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/65b9e004add4f0e0ff26aa2a