Electron + TypeScript 热重载实现方案求助

核心思路 #

由于TypeScript文件需要先编译为JavaScript才能被Electron识别，单纯用electron-reload或electron-reloader无法直接监听TS文件变更——这类工具默认监听已编译的JS文件，因此需要分两步实现热重载：

1. 持续监听TS文件变更，自动编译为JS
2. 监听编译后的JS文件变更，自动重启Electron应用

具体实现步骤 #

1. 安装必要依赖 #

在项目根目录执行：

npm install --save-dev concurrently nodemon

• concurrently：允许同时运行多个命令（TS编译监听 + Electron重启监听）
• nodemon：监听文件变更并自动重启指定进程

2. 修改package.json脚本 #

替换原有的start命令，新增开发模式脚本：

"scripts": {
  "build": "tsc",
  "watch": "tsc -w",
  "dev": "concurrently \"npm run watch\" \"nodemon --exec electron .\"",
  "start": "npm run build && electron ."
}

• watch：让TypeScript编译器持续监听src目录的TS文件，变更时自动编译到dist目录
• dev：同时启动TS编译监听和Electron进程监听，一旦dist目录的JS文件更新，nodemon会自动重启Electron

3. 优化nodemon配置（可选） #

在项目根目录创建nodemon.json，精准控制监听范围：

{
  "watch": ["dist"],
  "ext": "js,json",
  "exec": "electron ."
}

这样nodemon只会监听dist目录下的JS/JSON文件，避免无关文件变更触发不必要的重启。

为什么之前的方案无效？ #

electron-reload/electron-reloader主要针对渲染进程的静态资源（如HTML/CSS/已编译JS）重载，无法处理主进程TS文件的编译+重启流程。上述方案通过拆分TS编译监听和Electron进程重启，完美覆盖了主进程+渲染进程的热更新需求。

示例仓库 #

你可以直接基于Electron官方TypeScript快速启动仓库，按照上述步骤修改配置即可得到可运行的热重载项目。

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