在现代的前端开发中，我们经常会用到一些新的 JavaScript 语法，例如箭头函数、模板字符串、解构赋值、await/async 等等。尽管这些语法使得我们的代码更加简洁易读，但是由于一些老的浏览器并不支持这些新语法，我们需要通过 Babel 进行转译，并在需要的地方手动引入 polyfill 来实现兼容性。
本篇文章将着重介绍如何正确配置 Babel 的 polyfill，以便我们能够安心地使用 ES9 语法。
为什么需要 polyfill
在现代前端开发中，我们希望代码可以运行在尽可能多的浏览器上，包括一些老旧的浏览器。为了实现这一目标，我们需要使用 Babel 进行转译。
转译是指将新语法转换为老语法，使得浏览器可以正常运行这段代码。例如，将箭头函数转换为普通函数：
// ES6 语法 const sum = (a, b) => a + b; // 转译后的 ES5 语法 var sum = function(a, b) { return a + b; };
然而，有些新语法需要依赖一些新的原生 API 或类库来实现，例如 Promise、Set、Map、Array.includes 等等。这些新的 API 在老的浏览器中是不存在的，要使用这些 API 就需要手动引入 polyfill。
polyfill 是指一段代码，用来实现浏览器不支持的某个 API 或特性。当浏览器不支持某个新特性时，polyfill 可以模拟这个特性的行为，达到支持的效果。
如何引入 polyfill
Babel 提供了一个 @babel/polyfill 模块，用来实现新 API 的兼容性。这个模块会在全局对象中添加许多新的方法和属性，使得浏览器能够支持 ES6 和 ES7 的新 API。
你可以通过在代码的入口处引入 @babel/polyfill 模块来自动添加这些新的方法和属性。例如，在 index.js 的顶部添加以下代码：
import "@babel/polyfill";
这样就可以自动引入 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 模块：
import "@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：
创建一个空白项目：
mkdir babel-polyfill-demo cd babel-polyfill-demo npm init -y
安装 @babel/cli、@babel/core 和 @babel/preset-env：
npm install --save-dev @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 来转换代码：
npx babel index.js --out-file dist/index.js
生成的转换后的代码在 dist/index.js 文件中：
-- -------------------- ---- ------- ---- -------- ------------------------------------------------ -------------------------------------------------- ----------------------------------------- ------------------------------------------------- --- --- - -------- ------ -- - ------ - - -- -- --- -------- - -------- ----------- -- - ------ - - -- -- --- --- - --- -- --- --- ---------- - ---------------- --- ---- - -------- -- - --- ----- - ------------------ -------------------------------- --------- - --- ------- ------ -------------------------------- -------------- - ----- --- - ------ ---------- - ---------- - ---- -- --------- - -- ------ ----------------------- --------- ---- -- ------ - ---------- -------------------- ---- -- ---- ------ ------ ------------ - - -- --------- ---- ------ -------- ------ - ------ ----------------- ----------- -- ---- -------展开代码
可以看到，Babel 自动根据代码中使用的新 API 引入了对应的 polyfill，这样代码就可以在老的浏览器中运行了。
希望这篇文章对你了解 Babel 的 polyfill 特性有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65b9e004add4f0e0ff26aa2a
