Electron MOC
Electron 桌面应用的知识地图,覆盖框架总览、进程模型、安全边界、窗口与 IPC、构建发布、性能与项目实践。
#tech / dev / desktop
#resource / electron
#type / moc
#status / growing
[!info] related notes
- 上层入口: 前端工程化 MOC, Build Tools MOC
- 总览关系笔记: Electron
- 构建关系笔记: JavaScript 构建与 Electron 打包
- 架构关系笔记: Electron 架构总览
- 项目实践入口: daily-use-moc, readme
Electron MOC
这张地图覆盖什么
这张地图覆盖 Electron 的三层内容:
- 框架本体:Electron 是什么、为什么是多进程桌面运行时
- 工程主线:主进程、渲染进程、preload、IPC、安全边界、窗口管理
- 生产实践:构建、打包、原生模块、排障、项目案例
目标不是只停留在“会开窗口、会调 IPC”,而是建立一张能快速定位框架关系和问题边界的知识地图。
从这里开始
- 先看 Electron,建立总览
- 再看 Electron 进程模型
- 然后顺着
main -> renderer -> preload -> IPC -> security这条主线深入
核心地图
一、框架总览
二、进程与运行时边界
- Electron 主进程
- Electron 渲染进程
- Electron preload 脚本
- Electron contextBridge
- Electron BrowserWindow
- Electron WebContents
- Electron 应用生命周期
这一组解决:
- 代码到底跑在哪个进程
- 谁持有高权限
- 窗口和页面是怎么启动起来的
三、通信与桥接
这一组解决:
- main / renderer 怎么安全通信
- 什么时候用
invoke / handle - 初始化阶段有哪些轻量传参方式
四、安全边界
这一组解决:
- 为什么 renderer 不该直接拿 Node 权限
- preload 和页面为什么要隔离
- 现代 Electron 的默认安全基线是什么
五、构建与发布
- JavaScript 构建与 Electron 打包
- Electron 项目结构
- Electron Forge
- Electron 代码签名与公证
- Electron 自动更新
- Electron 原生编译
- Electron 开发常见问题详解
- electron-vue3-better-sqlite3-issues
- uuid-install-electron-error
这一组解决:
- 源码到可运行 Electron 应用的链路
- 原生模块 ABI、打包与运行时装载问题
六、数据与项目实践
- electron-project-data-storage
- electron-vue3-local-data-storage
- electron-vue3-local-cache-strategy
- electron-vue3-express-data-sync
- dailyuse中数据同步的实现分析
- dailyuse本地登录流程和powersync同步问题
七、窗口与实际工程案例
- electron-vue3-dual-window
- electron-vue3-multi-account-ipc-identifier
- electron-vue3-popup-reminder-service
- time-queue-module-error
推荐学习顺序
- Electron
- Electron 进程模型
- Electron 主进程
- Electron 渲染进程
- Electron preload 脚本
- Electron contextBridge
- Electron IPC 模式
- Electron contextIsolation
- Electron 进程沙箱
- Electron BrowserWindow
- Electron WebContents
- Electron 安全检查清单
- Electron 项目结构
- JavaScript 构建与 Electron 打包
- Electron Forge
关系与对比入口
- IPC - 操作系统层的通用 IPC 概念,不等于 Electron 的具体 API 设计
- Tauri - 与 Electron 的桌面框架对比入口
- 项目工程化实践(Vite) - Electron + Vite 工程化实践