Node项目中Webpack与Jest的ESM/CommonJS兼容问题求助

核心方案：分场景适配，不用全局设置"type": "module" #

业务代码全程用import/export语法，让Webpack和Jest各自适配自身的模块需求，互不干扰：

1. 保持package.json默认状态（不添加"type": "module"） #

这样Webpack的配置文件可以继续用CommonJS编写，__dirname这类变量能正常使用，不用费劲重构模块语法。

2. 单独给Jest配置ES模块支持 #

• 在项目根目录新建jest.config.js，写入以下配置：

export default {
  transform: {}, // 禁用Jest默认的CommonJS转换逻辑
  extensionsToTreatAsEsm: ['.js'], // 把普通.js文件当作ES模块处理
  moduleNameMapper: {
    '^(\\.{1,2}/.*)\\.js$': '$1' // 处理ES模块导入时的.js后缀匹配问题
  }
};

• 修改package.json中的测试脚本：

"scripts": {
  "test": "node --experimental-vm-modules node_modules/jest/bin/jest.js"
}

测试文件不用改成.mjs，保持.js后缀直接写import语法即可。

3. Webpack配置原样保留 #

继续用CommonJS语法编写webpack.config.js，示例如下：

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  }
};

Webpack会自动按CommonJS规则解析该配置文件，完全不影响业务代码的ES模块语法。

之前尝试失败的原因 #

• 全局设置"type": "module"会强制Webpack用ES模块解析配置文件，但Webpack对ES模块配置的支持仍有兼容性问题，__dirname这类CommonJS专属变量无法直接使用，重构时容易出现导出错误。
• 仅修改测试脚本添加实验性参数，但未配置Jest的ES模块规则，Jest仍会按CommonJS逻辑解析测试文件，因此出现SyntaxError: Cannot use import statement outside a module错误。

内容的提问来源于stack exchange，提问作者Yuriy