在前端开发中，使用 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 选项即可。下面是一个示例代码：
-- -------------------- ---- -------
-- --------
-
---------- -
------- -
---------- -
----------- ------ - ---------- ------- -- ---
--
-- -- -----------
-------------- -------
--
-
-示例代码中，我们开启了 preset 中的 useBuiltIns，同时将选项设置为 usage，表示只引入项目中使用的新特性对应的 polyfill。
总结
useBuiltIns 和 preset 中的 useBuiltIns 可以帮助我们自动引入项目中需要的 polyfill。通过设置 useBuiltIns 的选项，我们可以在尽可能减小体积的同时确保代码的完整性。需要注意，这两个选项需要配合合适的 targets 选项一起使用，来确保项目兼容较低版本的浏览器。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65a1ea08add4f0e0ffa01961