如何阻止Electron启动额外实例？解决React/Electron双窗口启动问题

1. 阻止React开发服务器自动打开浏览器 #

如果你的项目基于create-react-app搭建，默认npm start会自动唤起浏览器。修改package.json的启动脚本，添加环境变量禁用该行为：

• macOS/Linux系统：

"scripts": {
  "start": "BROWSER=none react-scripts start",
  "electron": "electron ."
}

• Windows系统：

"scripts": {
  "start": "set BROWSER=none && react-scripts start",
  "electron": "electron ."
}

如果是自定义webpack配置，找到webpack-dev-server的配置项，设置open: false即可关闭自动打开浏览器的逻辑。

2. 配置Electron实现单实例运行 #

在Electron主进程文件（通常是main.js或electron/main.js）中，利用app.requestSingleInstanceLock()确保仅一个应用实例运行：

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

let mainWindow;

// 尝试获取单实例锁
const gotTheLock = app.requestSingleInstanceLock();

if (!gotTheLock) {
  // 未获取到锁，说明已有实例，直接退出当前进程
  app.quit();
} else {
  // 已有实例被激活时，聚焦主窗口
  app.on('second-instance', () => {
    if (mainWindow) {
      if (mainWindow.isMinimized()) mainWindow.restore();
      mainWindow.focus();
    }
  });

  // 创建主窗口
  function createWindow() {
    mainWindow = new BrowserWindow({
      width: 800,
      height: 600,
      webPreferences: {
        nodeIntegration: true,
        contextIsolation: false
      }
    });

    // 开发环境加载React服务地址
    mainWindow.loadURL('http://localhost:3000');
    // 生产环境加载打包后的静态文件
    // mainWindow.loadFile('./build/index.html');

    mainWindow.on('closed', () => {
      mainWindow = null;
    });
  }

  app.on('ready', createWindow);

  app.on('window-all-closed', () => {
    if (process.platform !== 'darwin') app.quit();
  });

  app.on('activate', () => {
    if (BrowserWindow.getAllWindows().length === 0) createWindow();
  });
}

3. 优化启动流程（可选） #

如果想通过一条命令同时启动React开发服务器和Electron，可借助concurrently工具：

1. 安装依赖：npm install --save-dev concurrently wait-on
2. 修改package.json脚本：

"scripts": {
  "start": "BROWSER=none react-scripts start",
  "electron": "electron .",
  "dev": "concurrently \"npm start\" \"wait-on http://localhost:3000 && npm run electron\""
}

之后运行npm run dev即可一键启动服务，且不会唤起浏览器，同时保证单实例运行。

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