在使用 Babel7 进行前端开发时，经常会遇到 useBuiltIns 这个配置项。它可以用来自动引入 polyfill，以便让代码在不支持某些新特性的浏览器中正常运行。但是，useBuiltIns 又分为 'entry' 和 'usage' 两种模式，这两种模式有什么区别呢？本文将详细探讨这个问题，并给出示例代码和指导意义。
useBuiltIns: 'entry'
在 'entry' 模式下，Babel 会根据配置的目标浏览器或者运行环境，自动引入所有需要的 polyfill。这种模式下，所有的 polyfill 都会被打包到最终的输出文件中，不管实际上是否被使用到。
例如，我们可以这样配置：
-- -------------------- ---- -------
-- ---------------
-------------- - -
-------- -
--------------------- -
------------ --------
-------- -
------- -----
--- ----
-
--
-
-这样做的效果是，Babel 会自动引入所有在 Chrome 58 和 IE 11 中缺失的新特性的 polyfill，不管我们的代码是否用到了这些特性。这样做的好处是，我们不需要手动引入 polyfill，也不需要考虑是否需要引入哪些 polyfill。但是，缺点也很明显，即最终的输出文件会比较大，包含了很多实际上并没有用到的 polyfill。
useBuiltIns: 'usage'
在 'usage' 模式下，Babel 会根据代码中用到的新特性，只引入必要的 polyfill，而不会引入所有的 polyfill。这种模式下，最终输出的文件大小会比较小，因为只有实际用到的 polyfill 被引入了。
例如，我们可以这样配置：
-- -------------------- ---- -------
-- ---------------
-------------- - -
-------- -
--------------------- -
------------ --------
------- --
-------- -
------- -----
--- ----
-
--
-
-这样做的效果是，Babel 会根据我们的代码中用到的新特性，自动引入必要的 polyfill。在这个例子中，我们指定了 corejs 版本为 3，这意味着 Babel 会使用 core-js@3 中的 polyfill。另外，我们还指定了目标浏览器为 Chrome 58 和 IE 11。这样做的好处是，我们只引入了实际需要的 polyfill，最终输出的文件大小比较小。
总结
'entry' 模式和 'usage' 模式各有优缺点，我们需要根据实际情况进行选择。如果我们的代码中用到了很多新特性，而且我们不想手动管理 polyfill，那么可以选择 'entry' 模式。如果我们的代码中只用到了一些新特性，而且我们希望最终输出的文件大小比较小，那么可以选择 'usage' 模式。但是，无论选择哪种模式，我们都需要注意一点，那就是不要忘记指定 core-js 的版本，否则可能会引入错误的 polyfill。
示例代码
下面是一个示例代码，演示了如何在 'usage' 模式下使用 Babel7：
-- -------------------- ---- ------- -- -------- ----- --- - - -- -- -- - -- ----- --- - --- -- --- ----- ---- - ------------ -- ---- - --- ----- ---- - ------------------- ------------------ ------------------
-- -------------------- ---- -------
-- ---------------
-------------- - -
-------- -
--------------------- -
------------ --------
------- --
-------- -
------- -----
--- ----
-
--
-
-指导意义
在实际开发中，我们需要根据项目的实际情况选择合适的 useBuiltIns 模式。如果我们的项目需要支持较老的浏览器，那么可以选择 'entry' 模式。如果我们的项目只需要支持现代浏览器，那么可以选择 'usage' 模式。但是，无论选择哪种模式，我们都需要注意一点，那就是不要忘记指定 core-js 的版本，否则可能会引入错误的 polyfill。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65bdd41dadd4f0e0ff771d74