useBuiltIns/babel polyfill 中的目标浏览器选项答案

【问题标题】：Target browser option in useBuiltIns/babel polyfilluseBuiltIns/babel polyfill 中的目标浏览器选项
【发布时间】：2020-08-11 22:51:30
【问题描述】：

我想使用 'useBuiltIns' 选项为 IE11 浏览器加载 polyfill。

[
    '@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 的所有 polyfill，这增加了文件大小。如何指定仅为 IE 加载 polyfill 的选项？我尝试添加特定版本的 chrome，但没有成功。

【问题讨论】：

尝试使用“useBuiltIns: 'usage'”，在这种情况下，当目标环境不支持某些功能的使用时，会自动添加polyfills。

标签： reactjs internet-explorer-11 babeljs polyfills babel-polyfill

【解决方案1】：

Babel cherry 会根据您的配置为您挑选 polyfill。如果您只想为代码添加 polyfill，请在下面更改，您的代码库中需要转译。入口设置将添加所有内容

{ useBuiltIns: 'usage',

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

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

【讨论】：

【解决方案2】：

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

我想你可能对动态导入/摇树感兴趣。

您的入口文件导入总是加载 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 的 polyfill，其中增加文件大小。

IE11 不支持await/async，然后代码会被转译到生成器，然后再转译到带有状态的 ES5 函数。 lamda 函数也需要被转译。这些事情已经增加了您似乎关心的文件大小

【讨论】：