为什么将babel预设环境与`useBuiltIns：“ usage”`一起使用会导致和声模块出错？

Question

我正在尝试配置babel预设环境，以针对指定的目标浏览器列表自动注入polyfills。

文档指出，使用preset-env形式的属性配置"useBuiltIns": "usage"预设将完全做到这一点。

（（我注意到仅指定此属性会在控制台中显示警告，但指出我应该指定要使用的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箭头函数的语法错误，这些错误源于未编译的供应商脚本。

[如果有人能够解释为什么以不希望的方式更改__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

/webpack/除外帮了我大忙！