Electron 全套开发工具清单（2026 最新版）

一、基础开发环境（IDE + 运行环境）

1. 编辑器（首选）

VS Code（强烈推荐）：Electron 原生开发，调试、插件、终端一体化
- 必装插件：
  1. Electron Snippets：主进程 / 渲染进程 API 代码片段
  2. Electron Debug：一键调试主进程 + 渲染进程
  3. Debugger for Chrome：渲染进程调试
  4. TypeScript + ESLint + Prettier：代码规范
  5. Vite / Webpack 插件：打包构建提示
备选：WebStorm（内置 Electron 调试，适合付费团队）

2. 运行环境

Node.js：LTS 稳定版（Node 20/22，匹配 Electron 版本）
包管理器：npm /yarn/pnpm（pnpm 依赖安装更快）
Electron Fiddle（官方试验工具）：快速跑最小 Demo，无需搭建项目，适合测试 API

二、项目脚手架（初始化项目）

工具	定位	适用场景
Electron Forge（官方主推）	一站式脚手架 + 打包 + 发布，官方维护	新项目、标准工程、需要持续维护、CI 自动发布
electron-builder 模板	仅打包工具，配合 Vite/Webpack 自建项目	已有前端项目（Vue/React）套壳 Electron
electron-vite	Vite 构建 Electron，热更新极快	Vue/React+Electron，追求开发速度
electron-react-boilerplate	成熟 React+Electron 样板	React 桌面项目，内置打包与热更新

初始化命令（官方脚手架）

npm init electron-app@latest my-app

三、开发调试工具（核心）

1. 进程调试

Devtron（官方调试工具）
- 功能：查看主进程 IPC、进程列表、内存、事件、菜单、窗口状态；直接嵌入开发者工具
- 安装：npm install --save-dev devtron，主进程引入即可
VS Code 双进程调试（launch.json）
- 同时调试主进程（Main）+ 渲染进程（Renderer），断点联动
Chrome DevTools
- 渲染进程：F12 直接打开
- 主进程：--inspect=5858 开启远程调试

2. 热重载（开发自动刷新）

electron-reloader：文件改动自动重启主进程 + 刷新渲染窗口，最简方案
electron-vite 内置热更新：Vite 实现毫秒级渲染进程热更，无需重启主进程
webpack-dev-server + electron-webpack：Webpack 项目热重载方案

3. 框架组件调试

React：React DevTools（嵌入 Electron 窗口）
Vue：Vue DevTools
原生 HTML：直接用 Chrome 调试 DOM 与 JS

四、打包构建工具（最重要生产工具）

1. 两大主流打包工具（二选一）

① Electron Forge（官方首选，推荐新项目）

底层封装：@electron/packager、签名、安装程序、自动更新整套工具链
支持产物：Windows exe/msi、macOS dmg/app、Linux deb/rpm/snap
自带：代码签名、公证、Squirrel 自动更新、CI 发布脚本
命令：npm run make 一键打包所有平台安装包

② electron-builder（社区占有率最高，成熟稳定）

优点：零配置、自动处理依赖、内置自动更新、支持多平台打包、原生模块自动编译
产物：exe、nsis 安装包、dmg、deb、rpm、portable 绿色版
核心命令：

electron-builder build --win --mac --linux

配套：electron-builder install-app-deps 自动编译 C++ 原生依赖

2. 底层基础打包包（手动搭建项目用）

@electron/packager：把 Electron 程序打包成绿色 exe/app（无安装包）
electron-winstaller：Windows 生成 NSIS 安装包
@electron/osx-sign：macOS 代码签名 + 公证
electron-updater：跨平台自动更新模块（Forge 与 Builder 都基于它）

3. 跨平台打包辅助

conveyor：跨系统远程打包、自动签名、自动更新，开源项目免费
GitHub Actions / GitLab CI：云端自动打包 Windows/Mac/Linux，解决 macOS 只能在苹果机打包的问题

五、自动更新（生产必备）

electron-updater（通用）
- 支持 Windows（Squirrel.Windows）、macOS（Squirrel.Mac）、Linux；配合 builder/Forge 一键配置更新服务器
electron-auto-updater（Forge 内置）
Sparkle（macOS 专用更新）：替代 Squirrel，更新更稳定

六、原生模块编译（C++ 插件）

node-gyp：编译 Node 原生 C++ 模块
electron-rebuild：自动把原生模块重新编译为对应 Electron 版本的二进制文件（必装）

npx electron-rebuild

prebuild + prebuild-install：预编译二进制包，避免用户本地编译

七、测试工具

Spectron（官方 E2E 测试）：基于 ChromeDriver，自动化操作 Electron 窗口、点击菜单、IPC 调用，做 UI 自动化测试
Playwright：新一代跨端 E2E，兼容 Electron，比 Spectron 更稳定
Jest + vitest：单元测试（主进程业务逻辑）
electron-mocha：Electron 环境下运行 Mocha 测试

八、图标与资源打包工具

electron-icon-maker：一键生成全平台图标（ico、icns、png 多尺寸）
png2icons：生成 macOS icns、Windows ico
asset-resolver / webpack-asset-relocator-loader：打包静态资源（图片、html）
asar：Electron 内置打包工具，把源码打包成 asar 压缩包，保护源码、减小体积

九、性能与优化工具

Chrome 性能面板：渲染进程 CPU、内存、卡顿分析
Electron 性能监视器：查看多进程内存占用
source-map-explorer：分析打包包体积，优化代码体积
electron-packager --ignore：精简打包内容，剔除 node_modules 无用依赖
vite-plugin-electron：Vite 打包大幅减小包体积，提升启动速度

十、安全与签名工具

macOS：
- @electron/osx-sign：代码签名
- notarytool：苹果公证，避免 “无法打开” 警告
Windows：
- signtool：exe 数字签名
- electron-builder create-self-signed-cert：生成自签名证书（开发环境）
源码加密：
- asar + bytenode：把 JS 编译成字节码，防止源码被直接解压查看

十一、完整工具链两套方案（直接落地）

方案 A：新项目（官方标准）

VS Code + Electron Fiddle → Electron Forge + TS + Webpack → Devtron + VS Code 调试 → electron-rebuild → Forge Make 打包 → electron-updater 自动更新 → GitHub Actions CI

方案 B：Vue/React 前端套壳（社区主流）

VS Code + Vite + electron-vite → electron-reloader 热更新 → electron-builder 打包 → Playwright 自动化测试 → 云端 CI 打包多平台安装包

十二、常用 NPM 包汇总（devDependencies）

{
  "devDependencies": {
    "electron": "^34.0.0",
    "electron-forge": "^7.0.0",
    "electron-builder": "^25.0.0",
    "electron-reloader": "^1.2.3",
    "electron-rebuild": "^3.2.0",
    "devtron": "^1.4.0",
    "spectron": "^19.0.0",
    "vite-plugin-electron": "^0.15.0"
  },
  "dependencies": {
    "electron-updater": "^6.3.0"
  }
}

本文原创作者：易君召，详见：https://www.yijunzhao.cn/authors/yijunzhao，转载请注明出处。

原文链接 https://www.yijunzhao.cn/archives/electron-development-framework-introduction

欢迎访问小易撩挨踢

https://www.yijunzhao.cn/

菜单

分享