Electron+Vite+TypeScript项目tsconfig配置冲突问题求助

核心思路 #

你的需求是渲染进程用ES模块（import）、主进程/预加载用CommonJS（require），不能全局设置"type": "module"，必须拆分不同进程的tsconfig配置，让各自适配对应的模块系统。

逐个解决问题 #

1. 消除Node ES模块警告 #

警告源于主进程代码用了import语法，但Node默认以CommonJS模式运行。你需要让主进程的TypeScript编译输出CommonJS格式，同时代码里改用require（或通过配置让TS自动转换，但直接写require更贴合需求）。

2. 解决"composite": true报错 #

全局加"type": "module"是错误方向——主进程需要CommonJS支持。直接移除package.json里的"type": "module"，再调整tsconfig的复合项目配置即可。

3. 解决"allowImportingTsExtensions"报错 #

这个选项仅适用于**不编译输出代码（noEmit: true）或只输出声明文件（emitDeclarationOnly: true）**的场景，比如渲染进程的Vite项目（Vite会直接处理TS文件，不需要TS编译输出）。主进程需要编译输出JS，所以不能启用该选项。

最终配置修改 #

1. 根目录tsconfig.json（复合项目基础配置） #

{
  "compilerOptions": {
    "target": "ES5",
    "useDefineForClassFields": true,
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "skipLibCheck": true,
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true,
    "composite": true, // 复合项目必须开启
    "noEmit": true // 根目录仅做类型检查，不输出代码
  },
  "include": [
    "packages/renderer/vite.config.ts",
    "packages/main/vite.config.ts",
    "packages/preload/vite.config.ts"
  ],
  "references": [ // 关联所有子项目
    { "path": "./packages/main" },
    { "path": "./packages/preload" },
    { "path": "./packages/renderer" }
  ]
}

2. 主进程packages/main/tsconfig.json（CommonJS模式） #

{
  "compilerOptions": {
    "target": "ES2020", // 适配Node.js稳定版本，无需用esnext
    "useDefineForClassFields": true,
    "module": "CommonJS", // 输出CommonJS格式
    "moduleResolution": "node",
    "strict": true,
    "sourceMap": true,
    "resolveJsonModule": true,
    "esModuleInterop": true, // 可选：允许用import语法引用CommonJS模块，TS会自动转成require
    "isolatedModules": true,
    "lib": ["ES2020"], // 主进程不需要DOM库
    "types": ["node", "electron"], // 引入electron类型定义
    "outDir": "./dist", // 指定编译输出目录
    "rootDir": "./src"
  },
  "include": ["./src/**/*.ts", "./src/**/*.d.ts"],
  "references": [
    { "path": "../../tsconfig.json" }
  ]
}

3. 预加载脚本packages/preload/tsconfig.json（和主进程保持一致） #

{
  "compilerOptions": {
    "target": "ES2020",
    "useDefineForClassFields": true,
    "module": "CommonJS",
    "moduleResolution": "node",
    "strict": true,
    "sourceMap": true,
    "resolveJsonModule": true,
    "esModuleInterop": true,
    "isolatedModules": true,
    "lib": ["ES2020", "DOM"], // 预加载需要DOM库支持
    "types": ["node", "electron"],
    "outDir": "./dist",
    "rootDir": "./src"
  },
  "include": ["./src/**/*.ts", "./src/**/*.d.ts"],
  "references": [
    { "path": "../../tsconfig.json" }
  ]
}

4. 渲染进程packages/renderer/tsconfig.json（ES模块模式） #

{
  "compilerOptions": {
    "target": "ESNext",
    "useDefineForClassFields": true,
    "module": "ESNext",
    "moduleResolution": "bundler", // 适配Vite等打包工具
    "strict": true,
    "sourceMap": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "types": ["vite/client"],
    "noEmit": true, // Vite负责编译，TS仅做类型检查
    "allowImportingTsExtensions": true // 这里可以启用，因为noEmit为true
  },
  "include": ["./src/**/*.ts", "./src/**/*.d.ts", "./src/**/*.vue"],
  "references": [
    { "path": "../../tsconfig.json" }
  ]
}

代码调整示例 #

主进程和预加载脚本里，把import electronPath from 'electron'改成CommonJS语法：

const electron = require('electron');
// 或按需解构
const { app, BrowserWindow } = require('electron');

如果不想修改代码，也可以保留主进程tsconfig里的esModuleInterop: true，这样TS会自动把import编译成require，最终输出仍是CommonJS格式。

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