`@babel/preset-env` + `useBuiltIns` + `@babel/runtime` + `browserslistrc` 的最佳实践是什么

Question

对于@babel/preset-env与useBuiltIns结合使用的不同配置，我得到不同的输出@babel/transform-runtime。我已阅读文档，但无法弄清楚最佳实践应该是什么。

例如，当我的目标浏览器列表包含 Edge 18 时，@babel/preset-envwithuseBuiltIns将添加一个 polyfill string.replace。

但是当我@babel/transform-runtime改为使用时，不会添加该 polyfill。

---

所以，从这个问题开始：

Does `string.replace` need to be polyfilled for Edge 18?

• 我检查了caniuse.com，它显示它完全受支持 - 这意味着不需要 polyfill。

• 但是，根据 Manuel Beaudru 的博客文章core-js@3，babel 和展望未来

caniuse,mdn并且compat-table是很好的教育资源，但并不真正用作开发人员工具的数据源：仅compat-table包含一组良好的 ES 相关数据并且由 @babel/preset-env 使用，但它有一些限制

并进一步：

出于这个原因，我创建了这个core-js-compat包：它提供了关于不同目标引擎的 core-js 模块必要性的数据。使用时core-js@3，@babel/preset-env将使用该新包而不是compat-table.

所以我将我的目标浏览器传递给core-js-compat它并输出所有需要的 polfills。如下图所示，很多字符串方法需要 polyfill，主要是为了支持 Edge 18。

到现在为止还挺好。看起来Edge 18string.replace 确实需要填充。

---

Babel 配置

第一种方法：@babel/preset-env和useBuiltIns: 'usage'

当我使用useBuiltIns: 'usage'从以下位置引入每个文件的 polyfill 时core-js：

Does `string.replace` need to be polyfilled for Edge 18?

当debug: true，Babel 说它将添加以下 polyfills 到我的PriceColumn.js文件中：

// Console output

[/price-column/PriceColumn.js] Added following core-js polyfills:

  es.string.replace { "edge":"17", "firefox":"71", "ios":"12", "safari":"12" }
  es.string.split { "edge":"17" }
  web.dom-collections.iterator { "edge":"17", "ios":"12", "safari":"12" }

一个区别是它说的es.string.replace是 target edge: 17，而不是edge: 18我们在core-js-compat上面的输出中看到的- 可能是我已经做过的事情，但现在很好。

Babel 添加到转译PriceColumn.js文件顶部的附加内容：

// babel.config.js

  presets: [
    [
      '@babel/preset-env',
      {
        debug: false,
        bugfixes: true,
        useBuiltIns: 'usage',
        corejs: { version: "3.6", proposals: true }
      }
    ],
    '@babel/preset-flow',
    '@babel/preset-react'
  ],

再一次，到目前为止一切顺利。

---

第二种方法：@babel/runtime和@babel/transform-runtime

根据core-js文档：

@babel/runtimewithcorejs: 3选项简化了使用 core-js-pure. 它自动替换使用来自 JS 标准库的现代特性，以从core-js 没有全局命名空间污染的版本中导入

听起来不错 - 让我们试试吧！

注释掉useBuiltIns并添加@babel/transform-runtime插件配置：

// Console output

[/price-column/PriceColumn.js] Added following core-js polyfills:

  es.string.replace { "edge":"17", "firefox":"71", "ios":"12", "safari":"12" }
  es.string.split { "edge":"17" }
  web.dom-collections.iterator { "edge":"17", "ios":"12", "safari":"12" }

在控制台输出中，我看到：

Using polyfills: No polyfills were added, since the `useBuiltIns` option was not set.

检查添加到文件顶部的内容：

// PriceColumn.js

"use strict";

require("core-js/modules/es.string.replace");

require("core-js/modules/es.string.split");

require("core-js/modules/web.dom-collections.iterator");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

所以，helpers添加了不同的 - 但没有es.string.*polyfills的迹象。不再需要它们了吗？他们是不是已经被“帮手”带进来了？看起来对象传播和数组映射与 polyfilling 字符串实例方法没有任何关系，所以我认为不是。

---

最后

我的最后一次尝试是结合这两种方法 - 并遵循以下建议：

a) 设置corejs为@babel/preset-env：

// babel.config.js

  presets: [
    [
      '@babel/preset-env',
      {
        debug: true,
        // bugfixes: true,
        // useBuiltIns: 'usage',
        // corejs: { version: '3.6', proposals: true }
      }
    ],
    '@babel/preset-flow',
    '@babel/preset-react'
  ],
  plugins: [
    [
      '@babel/transform-runtime',
      {
        corejs: { version: 3, proposals: true },
        version: '^7.8.3'
      }
    ]
  ],

这是输出：

Using polyfills: No polyfills were added, since the `useBuiltIns` option was not set.

b) 设置corejs为@babel/transform-runtime：

• 与第二种方法相同（见上文）

---

比较不同方法的输出

仅使用useBuiltIns：

• 引入所需的字符串 polyfills，但会污染全局命名空间。

仅使用@babel/runtime-transform：

• 不引入任何字符串 polyfills，但引入其他 helpers/polyfills ??，用于 Array map 和 Object spread

同时使用的组合useBuiltIns和@babel/transform-runtime：

• 引入所需的字符串 polyfills，但会污染全局命名空间。
• 还引入了 Object spread polyfill（但不是 Array map polyfill）
• 从@babel/runtime/helpers/objectSpread2, not @babel/runtime-corejs3/helpers/objectSpread2(runtime vs runtime-corejs3) 导入 - 可能是没有引入 Array map polyfill 的原因？？）

---

题

哪个（如果有的话）是正确的方法？

我猜@babel/preset-envwithuseBuiltIns是最好的，因为它引入了 polyfills。

污染全局命名空间有什么弊端？这只是图书馆的问题吗？

与 相结合@babel/transform-runtime，我们还得到了一个用于对象传播的 polyfill（即使@babel-preset-env有corejs: { version: '3.6', proposals: true }哪个应该 polyfill 建议，所以我不确定为什么它不会被引入而不必使用@babel/transform-runtime插件）

我们需要 Array#map polyfill 吗？

Answer 1

由https://www.jmarkoski.com/understanding-babel-preset-env-and-transform-runtime推荐：

App：如果您正在编写应用程序，请在应用程序顶部使用 import 'core-js 并将 useBuiltIns 设置为 entry 并且 @babel/transform-runtime 仅用于帮助程序（@babel/runtime 作为依赖项）。这样你污染了全球环境，但你不在乎，这是你的应用程序。您将受益于别名为 @babel/runtime 的助手和包含在您的应用程序顶部的 polyfill。通过这种方式，您也不需要处理 node_modules（除非依赖项使用必须转换的语法），因为如果某个依赖项使用了需要 polyfill 的功能，则您已经在应用程序的顶部包含了该 polyfill。

库：如果您正在创作库，请仅使用带有 corejs 选项的 @babel/transform-runtime 加上 @babel/runtime-corejs3 作为依赖项，并使用 @babel/preset-env 使用 useBuiltIns: false 进行语法转换。此外，我会从 node_modules 转译我将使用的包。为此，您需要设置 absoluteRuntime 选项（https://babeljs.io/docs/en/babel-plugin-transform-runtime#absoluteruntime）以从一个地方解决运行时依赖，因为 @babel/transform-runtime直接从 @babel/runtime-corejs3 导入，但只有在 @babel/runtime-corejs3 位于正在编译的文件的 node_modules 中时才有效。