Electron+TypeScript项目中remote.require()与TS导入冲突问题求助

我完全懂你现在的两难——为了让Electron渲染进程通过remote.require()加载模块，不得不给my-module.ts加上module.exports = myModule，结果所有用标准import导入该模块的地方全报错了。这本质是CommonJS模块系统（remote依赖）与ES模块系统（TypeScript默认）的兼容性冲突，下面给你几个从临时过渡到长期最优的解决方案：

方案一：双导出兼容（临时过渡） #

在你的模块文件中同时保留ES模块导出和CommonJS导出，再配合TypeScript配置调整，让两者和平共存：

1. 修改模块文件 #

如果是默认导出的类/对象：

// 保留TypeScript的ES模块默认导出
export default class MyModule {
  doSomething(input: string) {
    return `处理结果：${input}`;
  }
}

// 添加CommonJS导出，供remote.require读取
module.exports = MyModule;

如果是具名导出：

// 保留ES模块具名导出
export const formatText = (text: string) => text.toUpperCase();

// 兼容CommonJS的导出
module.exports = { formatText };

2. 调整TypeScript配置 #

在tsconfig.json中开启两个关键选项，让TS能正确识别CommonJS导出为ES模块：

{
  "compilerOptions": {
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    // 其他原有配置...
  }
}

这样一来，remote.require()能读取module.exports，而TypeScript的import语句也能正常识别模块导出，不会再抛出错误。

方案二：用contextBridge替代remote（长期最优） #

要注意的是，Electron从v14开始就把remote模块标记为废弃了，官方推荐用contextBridge结合ipcMain/ipcRenderer实现主进程与渲染进程的通信。这个方案不仅能解决当前的导出冲突，还更符合Electron的安全规范。

步骤1：主进程暴露模块能力 #

在主进程（比如main.ts）中，通过ipcMain处理渲染进程的请求，调用你的模块逻辑：

import { ipcMain } from 'electron';
import MyModule from './my-module';

const myModuleInstance = new MyModule();

// 注册IPC处理函数，供渲染进程调用
ipcMain.handle('my-module:do-something', async (_, input) => {
  return myModuleInstance.doSomething(input);
});

步骤2：预加载脚本用contextBridge暴露API #

创建预加载脚本（比如preload.ts），通过contextBridge把需要的API安全暴露给渲染进程：

import { contextBridge, ipcRenderer } from 'electron';

// 向渲染进程的全局window对象暴露安全API
contextBridge.exposeInMainWorld('electronAPI', {
  myModule: {
    doSomething: (input: string) => ipcRenderer.invoke('my-module:do-something', input)
  }
});

记得在BrowserWindow配置中指定这个预加载脚本：

new BrowserWindow({
  // 其他配置...
  webPreferences: {
    preload: path.join(__dirname, 'preload.js'), // 注意是编译后的JS文件路径
    contextIsolation: true // 必须开启，确保渲染进程安全
  }
});

步骤3：渲染进程调用API #

在渲染进程的TS文件中，直接调用全局暴露的API即可，完全不需要remote.require()：

// 调用主进程中MyModule的方法
const result = await window.electronAPI.myModule.doSomething("测试输入");
console.log(result);

方案三：切换TypeScript到CommonJS模块（不推荐） #

如果你的项目可以接受放弃ES模块特性，可以修改tsconfig.json：

{
  "compilerOptions": {
    "module": "CommonJS",
    // 其他原有配置...
  }
}

然后在TS文件中用require代替import：

const MyModule = require('./my-module');

但这种方式会失去树摇、顶级await等ES模块优势，只适合老项目临时应急。

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