如何使用babel或webpack将Node.js CommonJS模块转换为ES6的import/export模块？

Question

如果这是一篇重复的文章，我很抱歉（我用搜索工具仔细查找了但没有找到）。有人有什么想法吗，如何转译Node.js的CommonJS模块，以便它们可以在ES6的导入/导出项目中使用？

我知道有 @babel/plugin-transform-modules-commonjs 可以将ES6模块转译成CommonJS形式，但我认为我需要相反的转换。我需要这样做的原因是我有一个使用Node的module.exports语法编写的配置文件，需要在使用ES6模块的babel构建的React项目中导入，但我遇到了Uncaught TypeError: Cannot assign to read only property 'exports' of object错误。任何想法都将不胜感激。

这是我的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 loader 规则：

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

- sgarcia.dev

---

不必要的。您可以使用ES6在Node.js中导入CJS模块。 - Thomas Sablik

我尝试过了，但它会出现我在描述中列出的错误。 - sgarcia.dev

这解决了你的问题吗？https://github.com/webpack/webpack/issues/4039 看起来是babel的问题。 - Thomas Sablik

是的和不是的。我完全不知道这是一个webpack问题，所以非常感谢您的澄清。我尝试将module-exports替换为exports，但这并没有解决问题（它破坏了其他东西）。然而，您指引了我正确的方向，在一些挖掘后，我发现设置babel的sourceType: ambigous解决了这个错误。请随意复制粘贴此链接作为答案，我很乐意将其标记为已接受的答案，因为您帮助我找到了解决方案。 - sgarcia.dev

不，应避免仅提供链接的答案，而且我现在也没有时间写解释。您可以自己回答问题或等待其他人回答。 - Thomas Sablik

Answer 1

由于@Thomas Sablik的评论，我发现这是一个已知的webpack问题。

在研究并查找此错误后，我在另一个Stack Overflow上找到了这个答案，通过将"sourceType":"unambiguous"添加到我的babel配置中，帮助我解决了它。 https://dev59.com/algQ5IYBdhLWcg3woleo#56283408 谢谢你，Thomas。

- sgarcia.dev