为什么我的webpack巴贝尔设置发射ESM需要，而我已经配置了我的预置为公共？

Question

今天我观察到babel/babel装载机表现出一些不良的行为。我把一些资产捆绑在nodejs上使用。编译后，将使用对@babel/runtime/**/esm/**的引用生成一个包。当然，节点不能导入这样的文件，在node bundle.js上我得到：

Must use import to load ES Module: /my/project/node_modules/@babel/runtime/helpers/esm/defineProperty.js
require() of ES modules is not supported.

正确的。合乎道理。但巴贝尔-装载机注入了这些进口产品。事实上，@babel/运行时中的父文件夹包含所有非ESM的东西，实际上我可能想要导入这些东西！我的babel配置看起来是这样的：

{
  presets: [
    [
      "@babel/preset-env",
      {
        modules: 'commonjs',
        targets: {
          node: "current",
          esmodules: false,
        },
      },
    ],
    "@babel/preset-typescript",
  ]
}

如您所见，我正试图通过targets.esmodules: false和modules: 'commonjs'告诉babel使用commonjs。我希望这些条目会告诉babel不要期望ESM兼容！不过，生成的包仍然如下所示：

...
var _toConsumableArray2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/esm/toConsumableArray */ "@babel/runtime/helpers/esm/toConsumableArray"));

我完整的webpack配置也相当简洁：

{
    entry: serverFilename,
    mode: 'development',
    output: {
      path: path.dirname(serverBuildFilename),
      filename: path.basename(serverBuildFilename)
    },
    target: "node",
    externals: [webpackNodeExternals()],
    optimization: {
      moduleIds: 'named',
      minimize: false
    },
    resolve: {
      extensions: ['.ts', '.tsx', '.wasm', '.mjs', '.js', '.json'],
    },
    module: {
      rules: [
        {
          test: /\.tsx?$/,
          exclude: /node_modules/,
          use: {
            loader: 'babel-loader',
            options: {
              presets: babelConfig.presets // see babel config above
            }
          }
        },
      ],
    },
  }

我无法判断我是否缺少配置，是否babel不尊重我的配置，或者<your ideas here>！

所有小费都很感激。谢谢!

Answer 1

我花了一段时间才找到解决方案，这篇文章帮助了https://github.com/webpack/webpack/issues/11696

在这里复制了我的解决方案：

最后我在webpack配置中使用了webpack-node-externals来绕过这个问题。

const nodeExternals = require('webpack-node-externals');

// add these to the webpack config.
    externals: [
          nodeExternals({
            whitelist: [/^@babel\/runtime/],
          }),
     ],

此解决方案创建重复的babel/运行时文件注入，还可以通过https://webpack.js.org/loaders/babel-loader/#babel-is-injecting-helpers-into-each-file-and-bloating-my-code减轻