tsconfig设置module为esnext时能否兼容require语法及多套配置？

开发者阿泽

2026-9-25

解决方案

方案1：保留现有`esnext`配置，直接兼容require语法

若报错为找不到名称“require”的类型错误，先执行npm i @types/node -D安装Node类型定义包即可解决基础类型识别问题。
新增esModuleInterop和allowSyntheticDefaultImports配置项，解决ES模块与CommonJS模块的互操作兼容问题，大部分场景下可直接修复require导入报错，修改后的tsconfig配置参考：

{
  "compilerOptions": {
    "module": "esnext",
    "moduleResolution": "node",
    // 新增以下配置
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    // 仍有报错可额外加这行，允许访问UMD全局变量
    "allowUmdGlobalAccess": true
  }
}

若仅少数文件使用require语法，可在对应文件顶部添加/// <reference types="node" />声明，或给require添加类型断言：const module = require('module-name') as typeof import('module-name')。

方案2：配置多套tsconfig规则，适配不同业务场景

如果希望大部分代码保留原有commonjs配置，仅需要懒加载的React相关文件使用esnext规则，可按以下方式配置：

根目录保留主tsconfig.json，使用原有commonjs配置，排除需要走懒加载规则的目录：

{
  "compilerOptions": {
    "module": "commonjs",
    // 其余原有全局配置保持不变
  },
  "exclude": ["src/components/lazy/**/*"] // 替换为你实际需要用懒加载的目录路径
}

在需要使用懒加载的目录下新增独立的tsconfig.json，继承根配置后覆盖模块规则：

{
  "extends": "../../tsconfig.json", // 按实际目录层级调整根配置的相对路径
  "compilerOptions": {
    "module": "esnext",
    "moduleResolution": "node",
    "esModuleInterop": true
  },
  "include": ["./**/*"]
}