Babel/preset-env：关于设置用于传送 Polyfill 的目标环境的混乱

Question

我正在学习如何使用@babel/preset-env我们的客户所需的浏览器polyfills。我的理解是，如果访问网站的客户端是目标环境之一，babel 就会发送polyfills。似乎有两种方法可以指定目标环境： 1. browserlist 2.targets选项{ "presets": [["@babel/preset-env", { "targets": "defaults" }]] }

但这里有几点我不太明白：

1. 看起来 Polyfills 都来自core-js. 添加 polyfill 似乎是一个构建时过程。我不太明白的是 babel 实际上是如何选择客户端需要的 polyfills 的 - babel 是一次性导入所有的 polyfills 并且仅在需要时在运行时应用它还是仅在构建时导入所需的 polyfills？如果 Babel 没有选择要应用的 polyfill，那么在运行时会如何发生这种情况？有人可以向我详细解释一下吗？
2. 使用选项targets设置目标环境与使用browserlist设置目标环境有什么区别？此外，我对 的默认查询感到困惑targets。在 babel 的文档上它说

因此，preset-env 的行为与 browserslist 不同：当 Babel 或 browserslist 配置中没有找到目标时，它不会使用默认查询。如果您想使用默认查询，则需要显式地将其作为目标传递：

因此，仅拥有{ "presets": ["@babel/preset-env"] }不会给我们默认查询，我们必须显式地将目标设置为默认值，如"presets": [["@babel/preset-env", { "targets": "defaults" }]]？

3. 这与我的第二个问题有关 - 如果我有一个项目已经定义"@babel/preset-env"但没有browserlist定义，我也没有{ "targets": "defaults" }，我是否仍在填充任何东西，或者在这种情况下我们没有发送和填充？

Answer 1

1. Babel 不会为您的客户端选择 polyfill，Babel 仅在编译阶段运行，并为您生成输出文件，现在由您决定是否为所有客户端提供这些文件。Babel 没有在您的服务器上运行，也没有在客户端上运行，它唯一运行的时间是在构建阶段。

2. 确实，如果您不设定目标，则不会应用任何目标。这意味着 babel 会转换你的最新代码以支持太多浏览器，这会增加你的文件大小（或客户端性能），这就是他们建议指定目标的原因。

3. 恰恰相反，在这种情况下，Babel 会改变太多，通过针对特定目标，Babel 会做更少的工作，并且您将只支持更高版本的浏览器（如您指定的）。