Electron

Electron 用 Chromium 渲染 Web UI + Node.js 主进程 打包成 Windows/macOS/Linux 桌面应用。VS Code、Slack 桌面版都属此类——适合 已有 Web 栈、要快出桌面版 的团队；代价是包体积与内存占用。

学习目标

• 理解主进程 / 渲染进程 / preload 分工
• 掌握 contextIsolation、禁用 nodeIntegration 等安全基线
• 对照路线图 electron 节点

进程模型

主进程（Main）     → 窗口、菜单、系统对话框、原生模块
渲染进程（Renderer）→ 每个 BrowserWindow 一个，跑你的 React/HTML
preload 脚本      → 在渲染页加载前注入，经 contextBridge 暴露安全 API

最小主进程（main.js）：

const { app, BrowserWindow } = require("electron");

function createWindow() {
  const win = new BrowserWindow({
    width: 960,
    height: 640,
    webPreferences: {
      preload: require("path").join(__dirname, "preload.js"),
      contextIsolation: true,
      nodeIntegration: false,
    },
  });
  win.loadURL("https://coderoadmap.cn/tracks");
}

app.whenReady().then(createWindow);

原则：渲染进程 不要 直接 require('fs')——通过 preload 暴露 最小 白名单 API。

与 React / 工具链

• UI 层可直接复用 react-essentials 组件；常用 electron-vite 或 Webpack 双目标构建
• frontend-toolchain-essentials 的打包概念不变，多一个 electron-builder / electron-forge 打安装包
• 内嵌本地 dev server 时，注意 http-cors 与 file:// 协议差异

安全注意（必记）

做法	原因
contextIsolation: true	隔离页面与 preload 世界
nodeIntegration: false	防止 XSS 升级为 RCE
不加载远程不可信 URL 并开 Node	远程内容 = 不可信代码
校验 preload 暴露的方法参数	防路径遍历、命令注入
自动更新签名校验	防中间人替换安装包

Electron 安全文档应作为 上线前 checklist，不是可选阅读。

Electron vs PWA

	PWA	Electron
分发	URL / 商店 PWA	安装包 / 商店
体积	小	通常 > 100MB
系统 API	Web API 子集	Node + 原生模块
更新	服务端部署	自动更新或重装

内部工具、IDE 类、需文件系统深度访问 → Electron 更常见；对外只读内容 → 先评估 PWA。

练习

• 画主进程、渲染进程、preload 三条箭头数据流
• 读 Electron 官方 Security 清单，标出与本课表格对应的三条
• 假设用 React 做 tracks 离线客户端，哪些能力必须 preload 暴露？

小结

Electron = Chromium + Node；安全靠隔离与白名单 API，不靠「别被 XSS」。 下一课 Tauri：Rust 壳 + 更小体积的另一种路线。