Electron+React+TypeScript项目修改后无法自动编译求助

我搭建了一个Electron+React+TypeScript项目，原本运行正常，但近期突然出现修改代码后无法自动编译的情况。只有停止项目重新启动，修改内容才会生效。该项目在其他设备及协作环境下均正常，仅在我的本地设备出现此问题。

主进程代码（index.ts）：

import { app, BrowserWindow } from 'electron';
// This allows TypeScript to pick up the magic constants that's auto-generated by Forge's Webpack
// plugin that tells the Electron app where to look for the Webpack-bundled app code (depending on
// whether you're running in development or production).
declare const MAIN_WINDOW_WEBPACK_ENTRY: string;
declare const MAIN_WINDOW_PRELOAD_WEBPACK_ENTRY: string;

// Handle creating/removing shortcuts on Windows when installing/uninstalling.
if (require('electron-squirrel-startup')) {
  // eslint-disable-line global-require
  app.quit();
}

const createWindow = (): void => {
  // Create the browser window.
  const mainWindow = new BrowserWindow({
    height: 600,
    width: 800,
    webPreferences: {
      preload: MAIN_WINDOW_PRELOAD_WEBPACK_ENTRY,
    },
    autoHideMenuBar: true
  });

  // and load the index.html of the app.
  mainWindow.loadURL(MAIN_WINDOW_WEBPACK_ENTRY);


  // Open the DevTools.
  // mainWindow.webContents.openDevTools();
};

// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.on('ready', createWindow);

try {
  // eslint-disable-next-line @typescript-eslint/no-var-requires
  require('electron-reloader')(module)
// eslint-disable-next-line no-empty
} catch (_) {}
// Quit when all windows are closed, except on macOS. There, it's common
// for applications and their menu bar to stay active until the user quits
// explicitly with Cmd + Q.
app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit();
  }
});

app.on('activate', () => {
  // On OS X it's common to re-create a window in the app when the
  // dock icon is clicked and there are no other windows open.
  if (BrowserWindow.getAllWindows().length === 0) {
    createWindow();
  }
});

// In this file you can include the rest of your app's specific main process
// code. You can also put them in separate files and import them here.

package.json 脚本：

"scripts": {
    "start": "electron-forge start",
    "package": "electron-forge package",
    "make": "electron-forge make",
    "publish": "electron-forge publish",
    "lint": "eslint --ext .ts,.tsx ."
  }

由于项目在其他环境正常，问题仅局限于本地，优先排查本地环境相关项：

1. 清理项目缓存 #

• 删除项目根目录下的 node_modules、package-lock.json（或yarn.lock）
• 重新执行 npm install / yarn install
• 删除Electron Forge生成的.webpack目录，清理Webpack编译缓存

2. 检查文件系统监听权限 #

• Windows：确认项目目录未被杀毒软件（如Windows Defender）拦截文件修改监听
• macOS：在「系统设置→隐私与安全性→完全磁盘访问权限」中，给运行项目的终端/IDE授予权限
• Linux：确保用户对项目目录有读写权限，且系统支持inotify（若存在监听限制，可调整fs.inotify.max_user_watches参数）

3. 调整electron-reloader配置 #

你的代码已引入electron-reloader，但初始化时机和参数可能存在问题：

• 将reloader初始化移至app.on('ready')之前，并显式开启渲染进程监听：

try {
  require('electron-reloader')(module, {
    watchRenderer: true
  })
} catch (_) {}

app.on('ready', createWindow);

4. 确认Electron Forge Webpack插件配置 #

检查forge.config.js/forge.config.ts中，Webpack插件是否开启热重载：

module.exports = {
  plugins: [
    {
      name: '@electron-forge/plugin-webpack',
      config: {
        mainConfig: './webpack.main.config.js',
        renderer: {
          config: './webpack.renderer.config.js',
          entryPoints: [
            {
              html: './src/index.html',
              js: './src/renderer.tsx',
              name: 'main_window'
            }
          ],
          devServer: {
            hot: true,
            liveReload: true
          }
        }
      }
    }
  ]
};

5. 优化IDE自动保存设置 #

部分IDE的自动保存延迟会导致修改无法被即时检测：

• 如VS Code，搜索「Auto Save」设置，选择afterDelay并将延迟调至100ms以内，或切换为onFocusChange

6. 排查文件占用情况 #

检查是否有其他进程锁定项目文件（如资源管理器打开文件、其他程序读写），关闭相关程序后重新启动项目

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