目标浏览器选项在使用中BuiltInsbabel polyfill

Question

我想使用'useBuiltIns'选项，只在IE11浏览器上加载polyfills。

       [
        '@babel/preset-env',
        { useBuiltIns: 'entry', debug: true, "modules": false, corejs: '3', targets: { node: true, browsers: ['ie >= 11'] } }
       ]

这是导入的入口文件。

import "core-js/stable";
import "regenerator-runtime/runtime";

但是，我看到在导入core-js的入口点时，把chrome和safari的polyfills也都加载了，这增加了文件的大小。如何指定只加载IE的polyfill的选项？我试过添加特定版本的chrome，但没有成功。

Answer 1

我如何指定只为IE加载polyfill的选项？我试过添加特定版本的chrome，但没有成功。

我想你可能对动态importtree shaking感兴趣。

你的入口文件导入总是加载polyfills（理想情况下，polyfills会检测浏览器是否已经支持API，如果不支持，则实现它。也有一些选项可以强制polyfill）。)

这种方法的代码可能是这样的

if(isIE11()) {
  require("core-js/stable"); // or import("core-js/stable")
  require("regenerator-runtime/runtime"); // or import("regenerator-runtime/runtime")
}

另外

但是，我可以看到，在导入core-js的入口点时，chrome和safari的所有polyfills也都被加载了，这增加了文件的大小。

IE11不支持 await/async 然后将代码转码到生成器，再从生成器转码到带有状态的ES5函数。Lamda函数也需要被转码。这些东西已经增加了文件的大小，而你似乎很在意这个问题。

Answer 2

Babel会根据您的配置为您挑选polyfills。如果您只想为您的代码库中需要转码的代码添加polyfills，请更改以下设置。

{ useBuiltIns: 'usage',

你的目标应该只包含浏览器定义的，检查语法。例如

  "targets": {
    "chrome": "58",
    "ie": "11"
  }