mcpField
E
electron-development

electron-development

github.com/mindrally开发2871.4k 次安装3 周前更新
代码仓库

关于 electron-development

面向 Electron 跨平台桌面应用开发的技能，涵盖进程划分、安全、IPC、窗口管理、测试与打包。

主要功能

  1. 01主进程与渲染进程组织
  2. 02Electron 应用安全实践
  3. 03IPC 通信模式
  4. 04窗口管理与自动更新
  5. 05测试与打包指导

适用场景

  1. 01规划 Electron 应用结构
  2. 02通过 preload 脚本安全暴露 API
  3. 03实现 IPC 处理器和窗口行为

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/mindrally/skills --skill electron-development

安装后在 Claude Code 中输入/electron-development确认已加载。

详细介绍

Electron 开发指南

你是 Electron 开发专家，擅长构建跨平台桌面应用程序。

核心原则

  • 遵循 Electron 应用的安全最佳实践
  • 分离主进程和渲染进程的职责
  • 使用 IPC 进行进程间通信
  • 实施适当的窗口管理

项目结构

src/
├── main/              # Main process code
│   ├── index.ts      # Entry point
│   ├── ipc/          # IPC handlers
│   └── utils/        # Utilities
├── renderer/          # Renderer process code
│   ├── components/   # UI components
│   ├── pages/        # Application pages
│   └── styles/       # Stylesheets
├── preload/          # Preload scripts
│   └── index.ts     # Expose APIs to renderer
└── shared/           # Shared types and utilities

安全最佳实践

上下文隔离
// main.js
const win = new BrowserWindow({
  webPreferences: {
    contextIsolation: true,
    nodeIntegration: false,
    preload: path.join(__dirname, 'preload.js')
  }
});
预加载脚本
// preload.js
const { contextBridge, ipcRenderer } = require('electron');

contextBridge.exposeInMainWorld('electronAPI', {
  sendMessage: (channel, data) => {
    const validChannels = ['toMain'];
    if (validChannels.includes(channel)) {
      ipcRenderer.send(channel, data);
    }
  },
  onMessage: (channel, callback) => {
    const validChannels = ['fromMain'];
    if (validChannels.includes(channel)) {
      ipcRenderer.on(channel, (event, ...args) => callback(...args));
    }
  }
});
内容安全策略
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'">

IPC 通信

主进程
const { ipcMain } = require('electron');

ipcMain.handle('read-file', async (event, filePath) => {
  const content = await fs.promises.readFile(filePath, 'utf-8');
  return content;
});

ipcMain.on('save-file', (event, { path, content }) => {
  fs.writeFileSync(path, content);
  event.reply('file-saved', { success: true });
});
渲染进程
// Using exposed API from preload
const content = await window.electronAPI.readFile('/path/to/file');

窗口管理

const { BrowserWindow } = require('electron');

function createWindow() {
  const win = new BrowserWindow({
    width: 1200,
    height: 800,
    minWidth: 800,
    minHeight: 600,
    webPreferences: {
      contextIsolation: true,
      preload: path.join(__dirname, 'preload.js')
    }
  });

  // Handle window events
  win.on('closed', () => {
    // Cleanup
  });

  // Load content
  if (process.env.NODE_ENV === 'development') {
    win.loadURL('http://localhost:3000');
    win.webContents.openDevTools();
  } else {
    win.loadFile('dist/index.html');
  }
}

自动更新

const { autoUpdater } = require('electron-updater');

autoUpdater.on('update-available', () => {
  // Notify user
});

autoUpdater.on('update-downloaded', () => {
  autoUpdater.quitAndInstall();
});

app.whenReady().then(() => {
  autoUpdater.checkForUpdatesAndNotify();
});

原生模块

  • 使用 electron-rebuild 处理原生依赖
  • 考虑使用 node-addon-api 构建自定义模块
  • 在所有平台上测试原生模块
  • 处理架构差异（x64、arm64）

性能

  • 尽量避免阻塞主进程
  • 使用 Web Worker 执行繁重计算
  • 实施懒加载
  • 使用 DevTools 进行性能分析

测试

  • 使用 Spectron 或 Playwright 进行端到端测试
  • 对主进程逻辑进行单元测试
  • 测试 IPC 处理程序
  • 在所有目标平台上进行测试

构建与分发

  • 使用 electron-builder 进行打包
  • 配置适当的应用签名
  • 搭建自动更新基础设施
  • 在所有平台上测试安装程序

评论

支持 Markdown