如何在Electron的main.js中向React的index.js传递依赖并调用函数？

Electron主进程和渲染进程是隔离的，不能直接互相导入文件，你遇到的语法错误是因为主进程默认使用CommonJS模块规范，而React项目通常用ES模块（import/export），直接跨进程导入会触发模块规范冲突。下面是两种可行的实现方案：

方案一：通过IPC（进程间通信）调用主进程函数 #

函数无法直接在进程间序列化传递，所以可以把主进程的函数逻辑封装成IPC调用接口，让渲染进程通过IPC触发执行。

1. 主进程（main.js）注册IPC监听 #

const { ipcMain, BrowserWindow } = require('electron');
const path = require('path');

// 定义你要给渲染进程使用的主进程函数
const mainProcessLogic = (input) => {
  return `主进程处理完成：${input.toUpperCase()}`;
};

// 注册IPC处理函数，支持异步返回结果
ipcMain.handle('invoke-main-function', async (_, args) => {
  return mainProcessLogic(args);
});

// 创建窗口时配置预加载脚本
const createWindow = () => {
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js'),
      contextIsolation: true, // 开启上下文隔离，遵循Electron安全规范
    }
  });

  mainWindow.loadURL('http://localhost:3000'); // React开发服务地址，打包时换成本地文件路径
};

2. 编写预加载脚本（preload.js） #

预加载脚本运行在渲染进程的上下文隔离环境中，用来安全暴露主进程的IPC接口到渲染进程：

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

// 向渲染进程的window对象暴露API
contextBridge.exposeInMainWorld('electronAPI', {
  callMainFunction: (args) => ipcRenderer.invoke('invoke-main-function', args)
});

3. 渲染进程（React的index.js/组件）调用 #

在React代码中通过暴露的electronAPI调用主进程函数：

// React组件或index.js中
async function dependency() {
  try {
    const result = await window.electronAPI.callMainFunction('测试参数');
    console.log(result); // 输出：主进程处理完成：测试参数
  } catch (err) {
    console.error('调用失败：', err);
  }
}

// 触发调用
dependency();

方案二：抽离共享函数到独立模块 #

如果你的函数不需要依赖主进程的API（比如只是纯业务逻辑工具函数），可以把这些函数抽离成兼容CommonJS和ES模块的共享文件，让主进程和渲染进程分别导入使用。

1. 创建共享模块（shared/utils.js） #

// 兼容两种模块规范的写法
function sharedToolFunction(arg) {
  return `共享函数处理结果：${arg}`;
}

// 给CommonJS导出
module.exports = { sharedToolFunction };
// 给ES模块导出
export { sharedToolFunction };

2. 主进程导入 #

// main.js
const { sharedToolFunction } = require('./shared/utils');

3. 渲染进程（React）导入 #

// React文件中
import { sharedToolFunction } from '../shared/utils';

function dependency() {
  const result = sharedToolFunction('测试');
  console.log(result);
}

为什么直接导入会报错？ #

主进程默认运行在Node.js的CommonJS模块环境中，不支持import/export语法；而React项目通常通过webpack等构建工具处理ES模块，直接在主进程中导入React的ES模块文件，就会触发“Cannot use import statement outside a module”错误。强行修改主进程为ES模块模式（在package.json加"type": "module"）会导致Electron自身的CommonJS API调用报错，所以不推荐这种方式。

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