本文介绍如何在 Electron + TypeScript 项目中通过 concurrently 和 tsc --watch 实现可靠的开发时自动重载，无需第三方热更新库，兼容官方 TypeScript 快速启动模板。
本文介绍如何在 electron + typescript 项目中通过 `concurrently` 和 `tsc --watch` 实现可靠的开发时自动重载，无需第三方热更新库，兼容官方 typescript 快速启动模板。
在 Electron + TypeScript 项目中实现热重载（Hot Reloading），关键在于分离编译与运行流程，并确保 TypeScript 编译输出实时同步、Electron 进程能响应变更重启。不同于 Web 前端可借助 Webpack HMR，Electron 主进程和渲染进程均运行于 Node.js 环境，因此更推荐采用「监听编译 + 进程自动重启」的轻量可靠方案——而非依赖易失效的 electron-reload（其对 .ts 源文件无感知，仅监听已生成的 .js 或资源文件）。
✅ 推荐方案：tsc --watch + concurrently + electron .
该组合完全基于 TypeScript 官方编译器和进程管理工具，零配置侵入、稳定高效，且天然适配 electron-quick-start-typescript 官方模板。
步骤一：安装依赖
npm install concurrently --save-dev
⚠️ 注意：concurrently 是开发时工具，务必使用 --save-dev，避免误入生产依赖。
步骤二：配置 package.json 脚本
{
"scripts": {
"watch-ts": "tsc --watch",
"start-electron": "electron .",
"dev": "concurrently -k -n TS,ELECTRON -c yellow,green "npm run watch-ts" "npm run start-electron""
}
}
- tsc --watch：持续监听 src/**/* 中的 .ts 文件变更，自动编译至 dist/（需确保 tsconfig.json 中 "outDir" 为 "dist"，且 "rootDir" 为 "src"）；
- electron .：直接从项目根目录启动 Electron（默认加载 main.js，即 dist/main.js）；
- concurrently 参数说明：
- -k：任一子进程退出时，终止所有进程（避免残留 Electron 实例）；
- -n TS,ELECTRON：为两个进程添加清晰标签，便于终端识别；
- -c yellow,green：为进程日志添加颜色区分；
- 双引号内命令需用反斜杠转义，确保 Shell 正确解析。
步骤三：验证项目结构
确保你的 tsconfig.json 至少包含以下关键配置：
使用 Scrapfly SDK（scrapfly-sdk）在 TypeScript 或 JavaScript 中进行网页抓取，用于用户请求抓取 URL、绕过反爬虫防护、渲染页面等场景。
{
"compilerOptions": {
"outDir": "./dist",
"rootDir": "./src",
"module": "commonjs",
"target": "ES2020",
"lib": ["ES2020", "DOM"],
"types": ["electron"]
},
"include": ["src/**/*"]
}
同时，main.ts 应位于 src/main.ts，并导出标准 Electron 主进程逻辑；index.html 渲染进程入口需正确引用 dist/renderer.js（或通过 <script type="module" src="./renderer.js"> 加载 ES 模块）。</script>
✅ 启动开发环境
npm run dev
此时终端将并行显示两路日志：黄色 TS 流显示编译状态（如 Found 0 errors. Watching for file changes.），绿色 ELECTRON 流显示 Electron 启动及窗口日志。任意修改 src/ 下 .ts 文件后，TypeScript 将立即重新编译，concurrently 检测到 dist/ 文件变更（Electron 自动监听 main.js 等入口），触发进程重启——实现毫秒级反馈的“伪热重载”体验（实为快速冷重启，用户感知接近热更新）。
? 进阶提示
- 若需真正热更新渲染进程（如 React/Vue 组件），可在 renderer.ts 中集成 @pmmmwh/react-refresh-webpack-plugin 或 Vite 的 HMR，但主进程仍建议保持上述 tsc + concurrently 方案；
- 避免在 dev 脚本中混用 electron-reload：它会干扰 tsc --watch 的文件监听，且无法触发 TypeScript 重新编译，导致代码不同步；
- Windows 用户若遇路径问题，请确保 package.json 中脚本使用正斜杠 / 或双反斜杠 \，或统一使用 cross-env 兼容环境变量。
该方案已在多个生产级 Electron + TypeScript 项目中长期验证，稳定、透明、无黑盒，是当前最简洁可靠的开发工作流实践。
