Babel/preset-env：关于为运输 polyfill 设置目标环境的困惑

Question

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

但这里有几件事我不太明白：

1. 看来polyfills 都来自core-js。添加 polyfill 似乎是一个构建时间过程。我不太明白的是 babel 是如何实际选择客户端需要的 polyfill - babel 是一次导入所有 polyfill 并且仅在需要时在运行时应用它，还是仅在构建时导入所需的 polyfill？ 如果 Babel 没有选择应用哪些 polyfills，那么在运行时是如何发生的呢？谁能给我详细解释一下？
2. 使用the targets options设置目标环境和使用browserlist设置目标环境有什么区别？此外，我对targets 的默认查询感到困惑。在 babel 的文档中它说

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

所以只有{ "presets": ["@babel/preset-env"] } 不会给我们默认查询，我们必须像"presets": [["@babel/preset-env", { "targets": "defaults" }]] 那样将目标显式设置为默认值？

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

Answer 1

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

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

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