Electrobun 入门：用 TypeScript 构建超轻量桌面应用
Electrobun 用系统原生 WebView + Bun 运行时构建桌面应用，体积只有 Electron 的零头。本文讲解项目初始化、主进程与窗口管理、React 前端集成与生产打包。
Electrobun 是 Electron 的轻量替代：界面用系统自带 WebView 渲染（不打包 Chromium），后端进程跑 Bun，全程 TypeScript 编写。产物体积从 Electron 的 200MB+ 降到十几 MB，启动和内存表现同步改善——代价是生态年轻、系统 WebView 的渲染差异需要测试覆盖。
为什么需要 Electrobun
Electron 让 Web 开发者能做桌面应用，代价人尽皆知：每个应用打包一整份 Chromium + Node.js，体积大、内存高、启动慢。Tauri 用系统 WebView + Rust 后端解决了体积问题，但引入 Rust 学习曲线。Electrobun 走第三条路：系统 WebView + Bun 后端 + 全 TypeScript——体积小了，技术栈不变。
性能特征
- 体积：典型应用打包后 10-20MB（Electron 普遍 150MB+）；
- 内存：不运行独立 Chromium 实例，内存占用显著下降；
- 启动：Bun 的冷启动优势直接传导到应用启动速度。
项目初始化与配置
bunx electrobun init my-app
cd my-app
项目配置在 electrobun.config.ts：应用标识、窗口默认尺寸、打包目标平台都在其中声明。开发命令：
bun run dev # 开发模式（前端热重载）
bun run build # 生产打包（按当前平台产出安装包）
主进程与窗口
主进程代码运行在 Bun 中，负责窗口生命周期与系统能力：
import { BrowserWindow } from 'electrobun';
const win = new BrowserWindow({
title: '我的应用',
url: 'http://localhost:5173', // 开发时指向前端 dev server
frame: { width: 1200, height: 800 },
});
主进程与 WebView 前端通过 Electrobun 的 RPC 桥通信：前端调 window.__electrobun 暴露的方法，后端注册 handler——模式与 Electron 的 IPC 类似但 API 更简洁。原生窗口定制（无边框、透明、始终置顶）通过 frame 选项控制。
前端集成
前端是完全自由的：内置模板默认 React + Vite（dev server 模式开发，打包时产出静态文件由 WebView 加载）。Vue/Svelte/原生 JS 同样可用——Electrobun 只管窗口与进程，不干涉前端技术选型。
需要权衡的点
- WebView 差异：Windows 的 WebView2、macOS 的 WKWebView 渲染细节有差异，CSS 兼容面比 Chromium 单引擎要广——跨平台 UI 需要在各平台实测；
- 生态年轻：应逐项核对系统托盘、崩溃上报及平台 API，不应将 Electron 插件兼容性视为默认成立；
- 适用画像：内部工具、效率软件、对体积敏感的消费者应用最受益；重度依赖 Chromium 特性的应用（特殊编解码、扩展体系）仍属 Electron 的领地。
常见问题（FAQ）
Q：Electrobun 支持哪些平台？
macOS、Windows、Linux 桌面三平台（系统 WebView 覆盖范围即支持范围）。移动端不在其定位内。
Q：现有 Electron 应用能迁移吗？
UI 层（React/Vue）基本可直接复用；主进程代码需要从 Electron API 重写到 Electrobun API（窗口、IPC、菜单），工作量取决于主进程复杂度。IPC 设计良好的应用迁移最顺。
Q：打包分发支持自动更新吗？
Electrobun 提供内置更新机制；仍需按官方文档配置发布渠道、版本与更新产物，并验证签名、失败回退及各目标平台的行为。
参考文档
本文依据公开文档整理，示例需按项目依赖版本验证；不将文档中的性能描述视为本项目实测结果。
