webpack - 为什么使用 babel preset-env with `useBuiltIns: "usage"` 导致 harmony-module 出错？

Question

我正在尝试配置 babel preset-env 以针对指定的目标浏览器列表自动注入(inject) polyfill。

文档指出，使用 "useBuiltIns": "usage" 形式的属性配置 preset-env 预设将执行此操作。

(我注意到单独指定这个属性会导致在控制台中显示警告，然而，声明我应该指定要使用的 core-js 版本，所以我也添加了这个。)

因此，我的 babel.config.js 看起来像这样:

module.exports = {
  "presets": [
    "@babel/preset-react",
    "@babel/preset-typescript",
    [
      "@babel/preset-env",
      {
        "useBuiltIns": "usage",
        "corejs": 3
      }
    ]
  ],
  "plugins": ['macros'],
};

太棒了!这应该是轻而易举的事!

但是，在使用 webpack 重新编译后，我的应用程序现在在浏览器中停止运行，控制台消息为:

Uncaught TypeError: __webpack_require__(...) is not a function
at Module../node_modules/webpack/buildin/harmony-module.js (harmony-module.js:24)

我做了一些研究(只花了大约 3 个小时!)，我知道这是 babel 试图转译 babel 或类似的东西的结果......我需要将一些文件添加到列表中忽略可能不会被转译或双重转译的内容。

在我的 webpack 配置中，我放置了以下内容。 (注意排除条目)。

module: {
  rules: [
    {
      test: /\.(js|jsx|ts|tsx)$/,
      exclude: [/core-js/, /regenerator-runtime/],
      use: [
        {
          loader: 'babel-loader',
          options: {
            presets: babelConfig.presets,
            cacheDirectory: babelCacheDir
          }
        },
        'eslint-loader'
      ]
    }
  ]
}

我也尝试在忽略模式上添加一些变体，但我仍然遇到致命的控制台错误。

我尝试过的另一件事是忽略 node_modules 文件夹，但是我有大块代码根本没有转译。即在 IE11 中，我收到有关 ES6 箭头函数的语法错误，这些错误源自未转译的 vendor 脚本。

如果有人能够解释为什么 __webpack_require__ 以不受欢迎的方式被改变，我将非常感激，因为这个问题所需的确切解决方案是非常难以研究的。

编辑:following建议必须让babel忽略core-js，这似乎很合理。它建议在 babel 配置文件中使用以下内容:

{
  ignore: [
    /\/core-js/,
  ],
  sourceType: "unambiguous",
  presets: [
    ['@babel/preset-env', { modules: false, useBuiltIns: 'usage' }],
  ],
}

但是，这会导致另一个看似非特定的错误出现:

has.js:4 Uncaught TypeError: Cannot convert undefined or null to object
    at hasOwnProperty (<anonymous>)
    at push../node_modules/core-js/internals/has.js.module.exports (has.js:4)

Answer 1

在 useBuiltins: "usage" 下，Babel 需要进行猜测。 ES6 与 CJS 导入样式；并且它最好使用与 Webpack 相同的方式进行猜测。

这在 the Babel docs 中有非常简要的介绍。 .正如所解释的那样，实现这一目标的最简单方法 elsewhere , 也是在传递给 @babel/preset-env 的选项中设置 sourceType: "unambiguous"。

尽我所能回答“为什么”的问题:

• useBuiltIns: "usage" 表示 Babel 将着手寻找和 polyfill一些浏览器中可能不存在的方法调用(和其他 JS 构造)。这需要在 Babel 重写时将一些修复代码注入(inject)到您的模块中。
• 很多这些修复包括导入core-js 片段以确保 Array 等原型(prototype)的填充令人满意；例如Babel 可能会插入诸如

  import "core-js/modules/es.array.map.js";

  之类的东西
• 非常不幸的是，more than one way to import things在 JavaScript 中。 Babel 必须猜测哪一个最适合下游工具链。如果 Babel 在 Webpack 的上游，这是一个非常典型的场景(你的问题就是这种情况)，它可能会破坏一些 auto-detection logic in Webpack通过将 import 语句添加到使用 require() 或 module.exports 的代码中。
• Webpack 不会直接抛出解析错误，而是会不幸地尝试处理此类受污染的代码；导致各种难以理解的编译时或运行时症状(here is another example)。

直到 Babel 和 Webpack 就 ES6/CJS 阻抗不匹配的论文达成某种约定或 secret 握手之前，作为模块作者，您必须以某种方式确保 Babel 和 Webpack 具有相同的想法源文件使用哪种格式；或者只是为你的“旧”(CJS)代码禁用 Babel，无论是在 node_modules/ 还是其他地方。