如何安全地将Electron.js渲染进程代码拆分到多个文件中？

先解决当前报错 #

你遇到的TypeError: api.Test is not a constructor是因为test.js导出的是包含Test类的对象，而preload.js中直接将这个对象赋值给了Test，导致暴露到渲染进程的不是类本身。

修改preload.js，通过解构赋值获取真正的Test类：

const { contextBridge, ipcRenderer } = require('electron');
const { Test } = require('./test'); // 解构导出的对象，拿到类

contextBridge.exposeInMainWorld('myAPI', {
    Test: Test
});

更合理的安全代码组织方式 #

上述修复只是解决了报错，但将业务类通过preload暴露并非最佳实践。既然你已经在index.html中使用了type="module"，渲染进程可以直接利用ES模块拆分代码，无需通过preload传递业务逻辑，preload只负责桥接主进程与渲染进程的IPC通信即可，这样既符合安全规范，又能清晰组织代码。

步骤1：将业务类改为ES模块 #

修改test.js为ES模块格式：

export class Test {
    constructor() {
        this.name = "TheSmith1222";
    }
    hi(){
        console.log("Hi, " + this.name);
    }
}

步骤2：渲染进程直接引入业务类 #

修改renderer.js，直接通过ES模块导入Test类，无需依赖preload：

import { Test } from './test.js';

const button = document.querySelector('#hi');
button.addEventListener('click', async () => {
    const test = new Test();
    test.hi();
});

步骤3：preload仅暴露IPC接口 #

preload的核心作用是安全桥接主进程与渲染进程，只保留必要的通信方法即可：

const { contextBridge, ipcRenderer } = require('electron');

contextBridge.exposeInMainWorld('myAPI', {
    // 仅暴露与主进程通信的方法
    openDialog: async () => await ipcRenderer.invoke('open-dialog')
});

步骤4：保持主进程安全配置 #

main.js中的安全设置（contextIsolation: true、nodeIntegration: false）符合最佳实践，继续保留。如果需要更高安全性，还可以将sandbox设为true，此时渲染进程权限被严格限制，业务代码通过ES模块组织依然能正常运行。

方案优势 #

• 业务逻辑完全在渲染进程的隔离上下文内运行，避免不必要的暴露，降低安全风险
• 利用ES模块天然支持代码拆分，轻松将渲染进程代码拆分为多个文件/类，结构清晰
• 严格遵循Electron的安全规范，无需关闭关键安全选项

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