拨开迷雾，直击@babel/preset-env使用polyfill遇到的坑

前言

在前端开发中，随着JavaScript语言的不断发展，新的API和语法特性层出不穷，但这些新特性往往不能在所有浏览器中得到支持。为了解决兼容性问题，Babel应运而生。Babel是一个JavaScript编译器，可以将新版JavaScript代码编译成兼容旧版浏览器的代码，从而实现代码跨浏览器的兼容性。

@babel/preset-env是Babel的一个预设，它可以帮助我们轻松地将代码编译成指定版本浏览器的兼容代码。@babel/preset-env支持两种不同的polyfill机制：按需加载 和注入核心JS库 。

按需加载 是指在需要使用新API或语法特性时，才加载相应的polyfill文件。这种方式的好处是体积小、加载快，但缺点是需要在代码中手动添加polyfill加载逻辑。

注入核心JS库 是指将所有需要的polyfill文件打包成一个核心JS库，然后在页面加载时一次性加载该核心JS库。这种方式的好处是使用简单，但缺点是体积大、加载慢。

@babel/preset-env使用polyfill遇到的坑

在使用@babel/preset-env时，我们可能会遇到一些问题。其中最常见的一个问题就是为代码中的新api注入的polyfill加载顺序存在问题 。

这个问题通常发生在使用按需加载 机制时。当我们在代码中使用了一个新的API或语法特性时，Babel会自动将相应的polyfill文件加载到页面中。但是，由于这些polyfill文件是按需加载的，因此它们的加载顺序是无法确定的。这可能会导致代码执行时出现错误。

为了解决这个问题，我们可以使用注入核心JS库 机制。这种机制可以确保所有需要的polyfill文件在页面加载时一次性加载，从而避免了加载顺序的问题。

如何使用@babel/preset-env注入核心JS库

要在@babel/preset-env中使用注入核心JS库机制，我们需要在.babelrc文件中添加如下配置：

{
  "presets": [
    ["@babel/preset-env", {
      "useBuiltIns": "usage",
      "corejs": 3
    }]
  ]
}

在这个配置中，useBuiltIns属性的值为"usage"，表示使用注入核心JS库 机制。corejs属性的值为3，表示使用core-js的第3个版本作为核心JS库。

添加完配置后，我们就可以在代码中使用新的API或语法特性了。Babel会自动将所有需要的polyfill文件打包成一个核心JS库，然后在页面加载时一次性加载该核心JS库。

结语

在使用@babel/preset-env时，我们可能会遇到一些问题。其中最常见的一个问题就是为代码中的新api注入的polyfill加载顺序存在问题 。这个问题通常发生在使用按需加载 机制时。为了解决这个问题，我们可以使用注入核心JS库 机制。这种机制可以确保所有需要的polyfill文件在页面加载时一次性加载，从而避免了加载顺序的问题。