Electron打包React应用为何仍使用旧代码而非最新修改？

看起来你遇到了React代码更新后，electron-builder打包出来的桌面应用还是旧版本的问题，我来帮你一步步排查解决：

1. 确保React编译产物是最新的 #

首先，你要确认每次打包前都执行了npm run build——Electron是加载项目根目录下build文件夹里的编译后文件，如果这个文件夹没更新，打包出来的自然还是旧内容。

• 可以手动删除build文件夹，然后重新执行npm run build，确保生成的是最新的代码；
• 检查build文件夹里的文件修改时间，确认是你最近修改后的时间。

2. 清理electron-builder的缓存 #

electron-builder会缓存一些打包资源，有时候会导致新的build内容没被正确纳入。你可以：

• 添加--clean参数到打包命令：修改package.json里的scripts：

  "dist": "electron-builder --clean"
  

  这样每次打包都会自动清理缓存；
• 手动删除缓存目录：
  • Windows：%LOCALAPPDATA%\electron-builder\cache
  • macOS：~/Library/Caches/electron-builder
  • Linux：~/.cache/electron-builder

3. 修复Electron加载逻辑（区分开发/生产环境） #

看你的electron.js代码，你把区分开发/生产环境的加载代码注释掉了，现在固定加载../build/index.html——这会导致dev模式下你虽然跑了React开发服务器，但Electron窗口还是加载旧的build文件。你需要恢复这个逻辑：
首先确保你已经安装了electron-is-dev（看你的package.json已经装了），然后修改代码：

const electron = require('electron');
const isDev = require('electron-is-dev'); // 引入环境判断包
const app = electron.app;
const BrowserWindow = electron.BrowserWindow;
const path = require('path');
const url = require('url');

let mainWindow;

function createWindow() {
  mainWindow = new BrowserWindow();
  mainWindow.maximize();
  // 恢复环境判断的加载逻辑
  mainWindow.loadURL(isDev ? 'http://localhost:3000' : `file://${path.join(__dirname, '../build/index.html')}`);
  mainWindow.openDevTools();
  mainWindow.on('closed', () => mainWindow = null);
}

// 剩下的代码保持不变...

这样dev模式下Electron会加载React开发服务器的实时内容，生产打包时加载最新的build文件。

4. 清理旧的打包产物 #

每次打包前手动删除项目根目录下的dist文件夹（electron-builder生成的安装包/绿色版都在这里），避免旧文件干扰新的打包结果。

5. 确认build配置的正确性 #

看你的package.json里的build配置：

"build": {
  "extends": null,
  "appId": "com.example.utility-core",
  "files": [
    "build/**/*",
    "node_modules/**/*",
    "public/electron.js"
  ],
  "directories": {
    "buildResources": "build"
  }
}

这个配置是没问题的，files已经包含了所有需要的build文件和Electron入口，不需要调整。

按照上面的步骤一步步来，应该就能解决打包后还是旧版本的问题了。

内容的提问来源于stack exchange，提问作者Zain Ul Abideen