Electron+React中使用child_process.spawn执行bash命令报错求助

问题根源 #

child_process是Node.js核心模块，只能在Electron主进程中直接调用，而你的React组件运行在渲染进程中，直接引入调用会因为环境权限、webpack打包处理导致模块异常，触发该报错。

解决方案：通过IPC通信让主进程执行shell命令 #

Electron推荐用IPC（进程间通信）实现渲染进程与主进程的交互，由主进程负责执行shell命令，渲染进程仅发送请求并接收结果。

1. 主进程中注册IPC监听

在Electron的主入口文件（如main.ts）中添加以下代码，处理渲染进程的命令执行请求：

import { app, BrowserWindow, ipcMain } from 'electron';
import { spawn } from 'child_process';
import path from 'path';

// ... 其他主进程初始化代码

// 监听渲染进程的命令执行请求
ipcMain.handle('execute-shell-command', async (_, command, args) => {
  return new Promise((resolve, reject) => {
    const process = spawn(command, args, {
      cwd: process.cwd(), // 可替换为你的目标工作目录
      stdio: 'pipe'
    });

    let stdout = '';
    let stderr = '';

    process.stdout.on('data', (data) => stdout += data.toString());
    process.stderr.on('data', (data) => stderr += data.toString());

    process.on('close', (code) => {
      code === 0 
        ? resolve({ success: true, output: stdout })
        : reject({ success: false, error: stderr, exitCode: code });
    });

    process.on('error', (err) => reject({ success: false, error: err.message }));
  });
});

2. 配置Preload脚本暴露IPC API

创建preload.ts文件，通过contextBridge安全地向渲染进程暴露IPC调用方法：

import { contextBridge, ipcRenderer } from 'electron';

contextBridge.exposeInMainWorld('electronAPI', {
  executeShellCommand: (command: string, args: string[]) => 
    ipcRenderer.invoke('execute-shell-command', command, args)
});

然后在Electron窗口配置中指定该preload脚本：

const createWindow = () => {
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js'), // 对应编译后的preload文件路径
      nodeIntegration: false, // 保持关闭，提升安全性
      contextIsolation: true // 开启上下文隔离，Electron默认推荐配置
    }
  });
  // ... 加载React页面等逻辑
};

3. React组件中调用API执行命令

在你的Note/PDFSymbol/TEXSymbol组件中，通过全局暴露的electronAPI调用命令：

// 声明全局类型，避免TypeScript报错
declare global {
  interface Window {
    electronAPI: {
      executeShellCommand: (command: string, args: string[]) => Promise<{
        success: boolean;
        output?: string;
        error?: string;
        exitCode?: number;
      }>
    }
  }
}

// 组件内调用示例
const runBashCommand = async () => {
  try {
    // 示例：执行ls命令
    const result = await window.electronAPI.executeShellCommand('bash', ['-c', 'ls']);
    console.log('命令输出:', result.output);
  } catch (err) {
    console.error('命令执行失败:', err);
  }
};

4. 可选：调整webpack配置

如果之前在渲染进程中直接引入过child_process，需要在webpack配置中添加externals，避免webpack错误打包该模块：

module.exports = {
  // ... 其他配置
  externals: {
    child_process: 'commonjs child_process'
  }
};

关键注意事项 #

• 永远不要在渲染进程中开启nodeIntegration: true，会带来严重的安全风险；
• 所有Node.js核心模块的调用逻辑都应该放在主进程中，渲染进程仅通过IPC交互。

内容的提问来源于stack exchange，提问作者Hashem A. Damrah