Babel-preset-env 的 useBuiltIns 或 preset 中的 useBuiltIns 讲解

在前端开发中，使用 Babel 来进行代码转换变得越来越常见。Babel 可以将 ES6+ 的新特性转换为 ES5 可以识别的语法。在使用 babel-preset-env 进行转换时，我们可以根据应用的实际情况，选择是否使用 useBuiltIns 或是通过 preset 中的 useBuiltIns 进行配置。这篇文章将详细讲解这两种方式的用法和意义。

useBuiltIns 的作用

useBuiltIns 是 babel-preset-env 中的一个选项，它的作用是告诉 Babel 是否使用 polyfill。在使用 babel-preset-env 进行转换时，如果没有开启 useBuiltIns，Babel 会将所有的新特性转换成 ES5 的语法，但是如果使用了某些 ES6 以上的新特性，就需要使用 polyfill，否则代码无法运行。而 useBuiltIns 就起到了检测并自动引入对应的 polyfill 的作用。这样就可以兼容低版本的浏览器，同时减小项目的体积。

preset 中的 useBuiltIns

preset 是预设选项的意思。babel-preset-env 的 preset 中同样也有 useBuiltIns 的选项。这个选项和 useBuiltIns 的作用是一样的，用来检测并自动引入对应的 polyfill，不同的是 preset 中的 useBuiltIns 可以自动检测你的项目中使用了哪些新特性，只引入需要的 polyfill。这样可以更加有效的减小项目的体积，提高加载速度。

使用 useBuiltIns 和 preset 中的 useBuiltIns

使用 useBuiltIns 或 preset 中的 useBuiltIns 的方法很简单。只需要在 babel-preset-env 的选项中开启相应的 useBuiltIns 选项即可。下面是一个示例代码：

// .babelrc

{
  "presets": [
    ["env", {
      "targets": {
        "browsers": ["last 2 versions", "safari >= 7"]
      },
      // 开启 useBuiltIns 
      "useBuiltIns": "usage"
    }]
  ]
}

示例代码中，我们开启了 preset 中的 useBuiltIns，同时将选项设置为 usage，表示只引入项目中使用的新特性对应的 polyfill。

总结

useBuiltIns 和 preset 中的 useBuiltIns 可以帮助我们自动引入项目中需要的 polyfill。通过设置 useBuiltIns 的选项，我们可以在尽可能减小体积的同时确保代码的完整性。需要注意，这两个选项需要配合合适的 targets 选项一起使用，来确保项目兼容较低版本的浏览器。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65a1ea08add4f0e0ffa01961