SuperAPI AI 工具集

electron-sveltekit

前端与建站

查看项目

更新于 10-16 05:42

技能介绍

用途:在构建跨平台桌面应用时加载本技能,用于处理 Electron 主进程与渲染进程、IPC 通信、原生系统功能(菜单、通知、文件系统)、以 SvelteKit(Svelte 5 runes)构建渲染层,以及自动更新与应用分发配置。

主要能力与模式:

  1. 项目结构:src 下划分 main(主进程、IPC、服务、窗口管理)、preload(通过 contextBridge 暴露安全 API)、shared(共享 IPC 契约)、renderer(SvelteKit 应用)。
  2. 安全 IPC:始终用 contextBridge 暴露 send、invoke、on 三类接口,避免直接暴露 Node。
  3. 类型安全契约:在 shared/ipc.ts 用 IpcChannels 定义各通道的 request/response 类型,并声明全局 Window.electron。
  4. 渲染层配置:生产环境将渲染层作为 SvelteKit SPA,设置 ssr = false、prerender = true,并使用 @sveltejs/adapter-static 输出到 build,fallback 为 index.html,以便 Electron 通过 file:// 加载。
  5. 主进程示例:创建 BrowserWindow 时启用 contextIsolation、关闭 nodeIntegration、开启 sandbox;开发时加载 http://localhost:5173,打包后加载 build/index.html。
  6. IPC 处理器:用 ipcMain.handle 实现 app:get-version、file:read、file:write、dialog:open-file、store:get、store:set 等,配合 electron-store 持久化。
  7. 渲染层 IPC 封装:用 .svelte.ts 模块与 runes 创建 createIpcQuery、listenIpc。
  8. 自动更新:使用 electron-updater 与 electron-log,监听 checking、available、not-available、progress、downloaded、error 事件并转发到渲染层。
  9. 原生菜单:用 Menu.buildFromTemplate 构建跨平台菜单,通过 webContents.send 通知渲染层。

使用方式:创建渲染层可用 pnpm dlx sv create renderer;渲染层构建用 @sveltejs/adapter-static 并设 ssr = false;主进程文件访问用 Node.js fs;渲染层文件访问经 preload 的 IPC;共享状态用带 runes 的 .svelte.ts 模块;持久化用主进程 electron-store;自动更新用 electron-updater;系统托盘用主进程 Tray 类;快捷键用 globalShortcut.register();代码签名用 electron-builder 配置。

限制与反模式:不要启用 nodeIntegration 或关闭 contextIsolation;渲染层路由不要直接导入 node:fs 等 Node API;打包后的渲染层不要保持 ssr = true。

适用场景:需要跨平台桌面应用、原生系统集成、安全 IPC 与自动更新的项目。具体版本、收费与平台支持等资料暂未提供。