ElectronJS主进程与渲染进程共享自定义类的方案问询

问题分析 #

主进程能用require导入自定义类，渲染进程不行，核心原因有两个：

1. 主进程与渲染进程的模块解析路径规则不同——渲染进程的require从当前JS文件所在目录出发找模块，主进程则从项目根目录查找
2. CommonJS（require/module.exports）和ES模块（import/export）的语法兼容冲突

方案1：统一用CommonJS，修正渲染进程路径 #

直接在渲染进程里用相对绝对路径或项目根路径导入模块，避免路径解析错误：

• 用__dirname拼接相对路径（适合渲染进程JS文件位置固定的场景）：

const path = require('path');
const { Competition } = require(path.join(__dirname, '../path-to-my-class'));

• 用Electron的app路径获取项目根目录（适合动态路径场景）：

const { remote } = require('electron');
const path = require('path');
const appRoot = remote.app.getAppPath();
const { Competition } = require(path.join(appRoot, 'path-to-my-class'));

方案2：让自定义模块兼容两种系统写法 #

修改你的Competition/Pool模块，同时支持CommonJS和ES模块导入，两边都能按需使用：

class Competition {
  // 你的类实现逻辑
}

class Pool {
  // 你的类实现逻辑
}

// 兼容CommonJS
if (module && module.exports) {
  module.exports = { Competition, Pool };
}

// 兼容ES模块
if (typeof exports !== 'undefined') {
  exports.Competition = Competition;
  exports.Pool = Pool;
}

// 可选：全局暴露给浏览器环境
if (typeof window !== 'undefined') {
  window.Competition = Competition;
  window.Pool = Pool;
}

如果想用ES模块的import语法，需要在项目根目录的package.json里添加"type": "module"；此时主进程的require要改成import，或者把主进程文件后缀改成.cjs来保留CommonJS语法。

方案3：用预加载脚本+ContextBridge（Electron推荐规范） #

这是最安全、符合Electron现代开发规范的做法，无需开启nodeIntegration和enableRemoteModule，通过预加载脚本把模块安全暴露给渲染进程：

1. 修改窗口配置，开启contextIsolation并指定预加载脚本：

const path = require('path');

function createMainWindow() {
    mainWindow = new BrowserWindow({
        width: 1080,
        height: 720,
        webPreferences: {
            nodeIntegration: false, // 关闭，提升安全性
            contextIsolation: true, // 开启，规范隔离
            preload: path.join(__dirname, './preload.js'), // 预加载脚本路径
        },
    });
    // ...
}

2. 编写preload.js，用contextBridge暴露模块：

const { contextBridge } = require('electron');
const { Competition, Pool } = require('./path-to-my-class');

// 向渲染进程暴露安全的API
contextBridge.exposeInMainWorld('tournamentAPI', {
    Competition: Competition,
    Pool: Pool
});

3. 渲染进程中直接使用全局暴露的API：

const competition = new window.tournamentAPI.Competition();

方案选择建议 #

• 快速临时解决选方案1；
• 需要兼容多种模块语法选方案2；
• 追求安全、符合Electron长期规范选方案3（推荐）。

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