如何配置Vitest以支持通过require引入ES模块

方案1：内联处理冲突依赖 #

在Vitest配置里把存在兼容性问题的依赖加入inline列表，让Vitest沿用Vite开发服务器的模块兼容处理逻辑：

修改vite.config.cjs：

const { defineConfig } = require('vitest/config');
const react = require('@vitejs/plugin-react').default;

module.exports = defineConfig({
  plugins: [react()],
  server: { /* ... */ },
  test: {
    environment: 'happy-dom',
    globals: true,
    deps: {
      inline: ['lib1']
    }
  },
});

该配置会让Vitest将lib1视为项目源码的一部分，自动修复它用require加载ESM模块的兼容性问题。

方案2：强制转译指定依赖文件 #

如果内联方式无效，可指定对lib1的产物文件进行转译，将其CJS语法转换为兼容ESM加载的格式：

const { defineConfig } = require('vitest/config');
const react = require('@vitejs/plugin-react').default;

module.exports = defineConfig({
  plugins: [react()],
  server: { /* ... */ },
  test: {
    environment: 'happy-dom',
    globals: true,
    transformMode: {
      web: [/lib1\/dist\/.+\.js$/]
    }
  },
});

方案3：预构建依赖解决兼容性 #

开启依赖预构建，让Vitest提前处理lib1和lib2的模块兼容问题：

const { defineConfig } = require('vitest/config');
const react = require('@vitejs/plugin-react').default;

module.exports = defineConfig({
  plugins: [react()],
  server: { /* ... */ },
  optimizeDeps: {
    include: ['lib1', 'lib2']
  },
  test: {
    environment: 'happy-dom',
    globals: true,
    deps: {
      optimizer: {
        web: {}
      }
    }
  },
});

优先尝试方案1，配置最简单且最贴合Vite原生处理逻辑；若无效再依次尝试方案2、3。

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