Babel / preset-env：有关为运送Polyfill设置目标环境的混淆

Question

Babel / preset-env：有关为运送Polyfill设置目标环境的混淆

10

我正在学习如何使用@babel/preset-env为我们的客户提供所需的浏览器 polyfill。我的理解是，如果访问网站的客户端是目标环境之一，Babel 将发送 polyfill 下来。似乎有两种指定目标环境的方法：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 配置中未找到目标时，它不使用 defaults 查询。如果要使用 defaults 查询，则需要显式将其作为目标传递。

那么仅仅使用{ "presets": ["@babel/preset-env"] }并没有给我们默认的查询，我们必须要明确地将目标设置为 defaults，例如 "presets": [["@babel/preset-env", { "targets": "defaults" }]]？

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

- Joji

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Shimon Brandsdorfer · Accepted Answer

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

恰恰相反，在这种情况下，Babel将进行过度转换，通过针对特定目标，Babel将做更少的工作，并且您只会支持较新版本的浏览器（如您所指定）。