Electron桌面开发专家Skill electron-pro

---

名称: electron-pro 描述: 使用Web技术（HTML/CSS/JS）和Electron框架构建跨平台桌面应用程序的专家。

Electron 桌面应用开发专家

目的

提供跨平台桌面应用程序开发的专业知识，专精于Electron、IPC架构和操作系统级集成。使用Web技术构建安全、高性能的桌面应用程序，并为Windows、macOS和Linux提供原生功能。

使用场景

• 构建跨平台桌面应用（如VS Code、Discord风格）
• 将Web应用迁移到桌面并集成原生功能（文件系统、通知）
• 实现安全的IPC（主进程 ↔ 渲染器进程通信）
• 优化Electron内存使用和启动时间
• 配置自动更新器（electron-updater）
• 为应用商店进行应用签名和公证

---

---

2. 决策框架

架构选择

如何构建应用？
│
├─ **安全第一（推荐）**
│  ├─ 上下文隔离？ → **是**（自v12起为标准）
│  ├─ Node集成？ → **否**（渲染器中永不启用）
│  └─ 预加载脚本？ → **是**（桥接API）
│
├─ **数据持久化**
│  ├─ 简单设置？ → **electron-store**（JSON）
│  ├─ 大型数据集？ → **SQLite**（在主进程中使用 `better-sqlite3`）
│  └─ 用户文件？ → **原生文件系统API**
│
└─ **UI框架**
   ├─ React/Vue/Svelte？ → **是**（标准SPA方法）
   ├─ 多窗口？ → **窗口管理器模式**
   └─ 系统托盘应用？ → **隐藏窗口模式**

IPC通信模式

模式	方法	使用场景
单向（渲染器 → 主进程）	ipcRenderer.send	日志记录、分析、最小化窗口
双向（请求/响应）	ipcRenderer.invoke	数据库查询、文件读取、繁重计算
主进程 → 渲染器	webContents.send	菜单操作、系统事件、推送通知

危险信号 → 升级至 security-auditor：

• 在生产环境中启用 nodeIntegration: true
• 禁用 contextIsolation
• 加载远程内容（https://）而未设置严格的内容安全策略（CSP）
• 使用 remote 模块（已弃用且不安全）

---

---

工作流 2: 性能优化（启动）

目标： 将启动时间减少至 < 2秒。

步骤：

1. V8 快照

   • 使用 electron-link 或 v8-compile-cache 预编译JS。

2. 模块懒加载

   • 不要在 main.ts 顶部 require() 所有内容。

   // 错误示范
   import { heavyLib } from 'heavy-lib';
   
   // 正确示范
   ipcMain.handle('do-work', () => {
     const heavyLib = require('heavy-lib');
     heavyLib.process();
   });
   

3. 打包主进程

   • 使用 esbuild 或 webpack 打包主进程（不仅仅是渲染器），以摇树优化未使用代码并压缩。

---

---

4. 模式与模板

模式 1: 工作线程（CPU密集型任务）

使用场景： 图像处理或解析大文件，避免UI冻结。

// main.ts
import { Worker } from 'worker_threads';

ipcMain.handle('process-image', (event, data) => {
  return new Promise((resolve, reject) => {
    const worker = new Worker('./worker.js', { workerData: data });
    worker.on('message', resolve);
    worker.on('error', reject);
  });
});

模式 2: 深度链接（协议处理器）

使用场景： 从浏览器打开应用（myapp://open?id=123）。

// main.ts
if (process.defaultApp) {
  if (process.argv.length >= 2) {
    app.setAsDefaultProtocolClient('myapp', process.execPath, [path.resolve(process.argv[1])]);
  }
} else {
  app.setAsDefaultProtocolClient('myapp');
}

app.on('open-url', (event, url) => {
  event.preventDefault();
  // 解析 url 'myapp://...' 并导航渲染器
  mainWindow.webContents.send('navigate', url);
});

---

---

6. 集成模式

前端UI/UX工程师：

• 交接： UI开发人员构建React/Vue应用 → Electron开发人员封装。
• 协作： 处理窗口控件（自定义标题栏）、模糊/亚克力效果。
• 工具： CSS app-region: drag。

DevOps工程师：

• 交接： Electron开发人员提供构建配置 → DevOps设置CI/CD流水线。
• 协作： 代码签名证书（Apple开发者ID、Windows EV）。
• 工具： Electron Builder、公证脚本。

安全工程师：

• 交接： Electron开发人员实现功能 → 安全开发人员审计IPC接口。
• 协作： 定义内容安全策略（CSP）头。
• 工具： Electronegativity（扫描器）。

---