Electron-Egg 页面热更新实现指南

要实现 Electron-Egg 页面的热更新，可以按照以下步骤进行操作：

在 'package.json' 文件中，找到主进程启动命令 'electron'，修改为 'electron-dev'，并新增一个 'electron-dev' 命令，用于启动 Electron 并监视主进程文件的变化。

{
  "scripts": {
    "electron": "electron .",
    "electron-dev": "concurrently 'nodemon --watch app --exec 'electron . --dev'' 'wait-on http://localhost:7001 && electron .'"
  }
}

在项目的根目录下创建一个名为 'main.dev.js' 的文件，用于替代原有的主进程入口文件 'main.js'。在 'main.dev.js' 中，添加以下代码来监听 Electron 的 'ready' 事件，并在该事件触发时打开开发者工具。

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

function createWindow() {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  });

  win.loadURL('http://localhost:7001');

  win.webContents.openDevTools();
}

app.whenReady().then(createWindow);

修改 'main.js' 文件，使其在生产环境中使用 'main.js'，而在开发环境中使用 'main.dev.js'。

const { app } = require('electron');
const isDev = require('electron-is-dev');

let mainWindow;

function createWindow() {
  mainWindow = new BrowserWindow({ ... });

  if (isDev) {
    mainWindow.loadURL('http://localhost:7001');
    mainWindow.webContents.openDevTools();
  } else {
    mainWindow.loadFile('build/index.html');
  }

  // ...

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

app.on('ready', createWindow);

在项目的根目录下创建一个名为 'electron.dev.config.js' 的配置文件，用于配置开发环境的 Electron 相关配置。在该文件中，设置 'mainProcessFile' 为 'main.dev.js'。

module.exports = {
  mainProcessFile: 'main.dev.js',
};

修改 'config.local.js' 文件，将 'config.electron' 的值设置为 'electron.dev.config.js'。

module.exports = {
  // ...
  electron: 'electron.dev.config.js',
};

通过执行 'npm run electron-dev' 命令，启动 Electron，并且在代码发生变化时，会自动重新加载应用程序。同时，可以通过 'Ctrl + R' 快捷键刷新页面来查看最新的更改。

这样就实现了 Electron-Egg 页面的热更新。