Babel Polyfill 详解

我们在终端使用@babel/cli运行 Babel，使用@babel/polyfill填充所有的新 JavaScript 特性，使用env Preset 来只包含转换和填充，用于我们使用的和目标浏览器中缺失的特性。

本文将对 Babel 的 Polyfill 做一个详细的讲解。

Polyfill

@babel/polyfill模块包含core-js和一个自定义的regenerator runtime来模拟完整的 ES2015+ 环境。

这意味着，你可以使用新的内置函数，如Promise或WeakMap；静态方法，如Array.from或Object.assign；实例方法，如Array.prototye.includes和生成函数(如果你用regenerator插件)。

为了做到这一点，Polyfill 添加了全局作用域以及本地原型（如 String ）。

如果你不需要一些实例方法，如Array.prototype.includes，你可以使用transform runtime插件替代@babel/polyfill，这样就不会污染全局作用域。

如果你明确知道你需要填充的特性，可以直接从core-js中引入。

构建应用程序时，我们可以直接安装@babel/polyfill：

1	npm install --save @babel/polyfill

注意： 这里使用--save选项而不是--save-dev选项，因为 Polyfill 需要在源码之前运行。

现在，我们使用env Preset时，可以将其useBuiltIns选项值设置为usage，将实际应用上面提到的最后一个优化，其中只包含您需要的填充。

const presets = [
  [
    "@babel/env",
    {
      targets: {
        edge: "17",
        firefox: "60",
        chrome: "67",
        safari: "11.1",
      },
      useBuiltIns: "usage",
    },
  ],
];

module.exports = { presets };

现在，Babel 将检查所有代码，查看目标环境中缺少的特性，只包含所需的填充。例如：

1	Promise.resolve().finally();

将会转换成：

1
2
3

require("core-js/modules/es.promise.finally");

Promise.resolve().finally();

如果我们没有使用将useBuiltIns选项设置为usage的env Preset，我们就必须在所有其他代码之前引入完整的填充（只有一次）。