本文介绍如何在 Electron + TypeScript 项目中通过 concurrently + tsc --watch 实现高效、稳定、零依赖侵入的开发时自动重载，无需额外构建工具即可监听 TS 源码变更并重启主进程。
本文介绍如何在 electron + typescript 项目中通过 `concurrently` + `tsc --watch` 实现高效、稳定、零依赖侵入的开发时自动重载，无需额外构建工具即可监听 ts 源码变更并重启主进程。
在 Electron 与 TypeScript 的组合开发中，“热重载”常被误解为前端 HMR（Hot Module Replacement）——但需明确：Electron 主进程不支持真正的模块级热更新；实际可行且推荐的开发流是 “文件变更 → 自动编译 TS → 重启 Electron 进程”，即快速重启（Fast Restart），它足够轻量、可靠，且完全兼容官方 TypeScript 快速启动模板（electron-quick-start-typescript）。
✅ 推荐方案：concurrently + tsc --watch
该方案不引入 Webpack/Vite 等构建层，保留原生 TypeScript 编译流程，仅增加进程协同能力：
- tsc --watch 监听 src/ 下 .ts 文件，自动编译输出到 dist/（需确保 tsconfig.json 中 "outDir": "dist" 已配置）；
- electron . 启动时默认加载 dist/main.js（主进程入口）和 dist/preload.js（如使用）；
- concurrently 并行运行二者，并在任一子进程退出时（如 Electron 关闭）自动终止另一进程，避免残留。
? 配置步骤
-
安装开发依赖：
npm install concurrently --save-dev
-
确保 tsconfig.json 正确设置输出路径与源映射：
Scrapfly SDK TypeScript下载使用 Scrapfly SDK（scrapfly-sdk）在 TypeScript 或 JavaScript 中进行网页抓取，用于用户请求抓取 URL、绕过反爬虫防护、渲染页面等场景。
{ "compilerOptions": { "outDir": "dist", "rootDir": "src", "sourceMap": true, "module": "commonjs", "target": "ES2020", "lib": ["ES2020", "DOM"], "types": ["electron"] }, "include": ["src/**/*"] } -
更新 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\"" }
- -k：任一命令退出时，终止所有子进程（防止 tsc --watch 持续挂起）；
- -n：为终端标签命名，便于区分日志来源；
- -c：为不同进程设置颜色，提升可读性。
- 启动开发环境：
npm run dev
✅ 修改任意 .ts 文件（如 src/main.ts 或 src/preload.ts）后，你将看到：
- 黄色区域实时输出 TypeScript 编译成功日志；
- 绿色区域自动重启 Electron 窗口（若已关闭则重新打开）。
⚠️ 注意事项
- 入口文件一致性：main 字段在 package.json 中应指向编译后路径，例如 "main": "dist/main.js"，而非 src/main.ts；
- Renderer 进程刷新：此方案仅重启主进程；若需同步刷新渲染进程（如 React/Vue 页面），建议搭配 electron-reload（仅用于 renderer HTML/JS/CSS）或使用现代框架内置 Dev Server（如 Vite + @vitejs/plugin-electron）；
- 调试友好性：VS Code 可直接附加到 electron . 进程，sourceMap 启用后支持 .ts 断点调试；
- 性能提示：tsc --watch 内存占用低、响应快，远优于基于文件系统轮询的 electron-reload（后者对 .ts 无感知，仅监听 .js 输出）。
✅ 总结
对于追求简洁、可控、贴近官方模板的 Electron + TypeScript 项目，concurrently + tsc --watch 是经过验证的黄金组合：零配置冲突、无构建抽象泄漏、完美适配 electron-quick-start-typescript 结构。它不承诺“毫秒级热更新”，但提供亚秒级反馈闭环——这才是桌面应用开发中最务实、最可靠的热重载体验。
