在前端开发中，Babel-polyfill 是一个非常常用的工具，它可以让我们在使用一些新的 JavaScript API 或者语法时，使其在旧的浏览器中也能够正常运行。但是，在使用 Babel-polyfill 时，我们可能会遇到一个问题，即在使用 rollup 进行打包时，会出现编译失败的情况。
问题分析
在使用 rollup 进行打包时，它会对代码进行 tree-shaking，即只保留被使用的代码，而将未被使用的代码删除。但是，在使用 Babel-polyfill 时，它会在全局作用域中添加一些新的 API 或者语法，这些 API 或者语法在我们的代码中可能并没有被使用，但是却被 rollup 认为是被使用的，从而导致了编译失败。
解决方案
为了解决这个问题，我们可以使用 @babel/preset-env 中的 useBuiltIns 选项来按需引入 polyfill。useBuiltIns 选项有三个值可选：false、entry 和 usage。
- false：不引入任何 polyfill，需要手动引入。
- entry：根据浏览器兼容性自动引入所有需要的 polyfill，但是会导致打包出的文件体积非常大。
- usage：根据代码中使用的 API 或者语法自动引入需要的 polyfill，打包出的文件体积较小。
我们可以在 .babelrc 文件中进行配置：
-
---------- -
-
--------------------
-
-------------- --------
--------- -
-
-
-
-其中，corejs 选项是指定使用的 core-js 版本。如果不指定，将默认使用 core-js@2。
示例代码
下面是一个使用 Babel-polyfill 的示例代码：
------ ----------------- ----- --- - --- -- -- ----------------------------
在使用 rollup 进行打包时，如果不做任何配置，会出现以下错误：
--- ------ ---------- -- --- -------- -- -----------------------------------------
我们可以通过在 .babelrc 文件中配置 useBuiltIns 选项来解决这个问题：
-
---------- -
-
--------------------
-
-------------- --------
--------- -
-
-
-
-配置之后，再次进行打包，即可成功编译。
总结
Babel-polyfill 是一个非常好用的工具，它可以让我们在代码中使用新的 JavaScript API 或者语法，而不必担心在旧的浏览器中无法运行。但是，在使用 rollup 进行打包时，它可能会导致编译失败。我们可以通过在 .babelrc 文件中配置 useBuiltIns 选项来解决这个问题，使得打包出的文件体积更小，更加高效。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/650fb49395b1f8cacd862f0e