当我将我的预设配置为 commonjs 时，为什么我的 webpack babel 设置发出 ESM 要求？答案

【问题标题】：Why is my webpack babel setup emitting ESM requires when I have configured my preset to commonjs?当我将我的预设配置为 commonjs 时，为什么我的 webpack babel 设置发出 ESM 要求？
【发布时间】：2020-10-10 06:58:01
【问题描述】：

今天我观察到 babel/babel-loader 表现出一些不良行为。我正在捆绑一些资产以在 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-loader 注入了这些导入。事实上，@babel/runtime 中的父文件夹包含所有非 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>！

感谢所有提示。谢谢！

【问题讨论】：

你确定它是 babel 而不是 typescript？例如。 "compilerOptions": { "module": "commonjs",
如果你查看共享的sn-ps，你可以清楚地看到babel正在将sn-ps注入babel-runtime。此外，不涉及正确的打字稿——在这种情况下，babel 会为我编译打字稿。所以我相信它不是打字稿，而是在 babel/babel-loader 领域的某个地方。
typescript proper isn't involved 仍然是打字稿，没有非专有的打字稿。它仍将使用tsconfig.json
见 #3 babeljs.io/docs/en/babel-plugin-transform-typescript#caveats 。我怀疑 tsconfig 不相关

标签： javascript node.js webpack babeljs

【解决方案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/runtime 文件注入，也可以通过 https://webpack.js.org/loaders/babel-loader/#babel-is-injecting-helpers-into-each-file-and-bloating-my-code 缓解

【讨论】：