javascript - 如何使用 babel 或 webpack 在 ES6 导入/导出模块中使用 Node.js CommonJS 模块？

Question

如果这是重复的，我很抱歉(我使用搜索工具仔细查找，但没有找到任何结果)。有人知道如何转换 Node.js CommonJS 模块以便它们可以在 ES6 导入/导出项目中使用吗？

我知道有 @babel/plugin-transform-modules-commonjs它将 ES6 模块转换为 CommonJS 形式，但我认为我需要相反的东西。我需要这个的原因是我有一个使用 Node 的 module.exports 语法编写的配置文件，需要在使用 ES6 模块使用 babel 构建的 React 项目中导入，但是我得到了一个 Uncaught TypeError : 无法分配给对象的只读属性“导出” 错误。任何想法将不胜感激。

这是我的 babelrc.js 文件:

module.exports = {
  presets: ['@babel/preset-env', '@babel/preset-react'],
  plugins: [
    ['@babel/plugin-proposal-class-properties', { loose: true }],
    ['@babel/plugin-transform-runtime', { regenerator: true }],
    '@babel/plugin-syntax-dynamic-import',
    '@babel/plugin-proposal-optional-chaining'
  ],
  env: {
    production: {
      plugins: [
        [
          "transform-react-remove-prop-types",
          { removeImport: true }
        ],
      ]
    }
  }
}

还有我的 webpack 配置 babel 加载器规则:

{
          test: /\.(js|jsx)$/,
          exclude: /node_modules/,
          use: [
            {
              loader: 'babel-loader',
              options: {
                cacheDirectory: true,
                cacheCompression: false,
                envName: isModeProduction ? 'production' : 'development'
              }
            }
          ]
        },

Answer 1

感谢@Thomas Sablik 的评论，我发现这是一个 known webpack issue .

在四处寻找并查找此错误后，我在另一个 Stack Overflow 上找到了这个答案，它通过将 "sourceType": "unambiguous" 添加到我的 babel 配置来帮助我修复它。 https://stackoverflow.com/a/56283408/2942765

谢谢托马斯。