Electron 让前端开发者也能做桌面应用。记录一下开发过程。

项目背景

需要一个本地的 Markdown 笔记工具，市面上的都不太满意，决定自己写一个。

技术选型

• Electron：桌面框架
• React：UI 框架
• CodeMirror：编辑器
• better-sqlite3：本地数据库

项目结构

src/
├── main/           # 主进程
│   ├── index.js    # 入口
│   └── ipc.js      # IPC 通信
├── renderer/       # 渲染进程
│   ├── App.tsx
│   └── components/
└── preload/        # 预加载脚本

关键实现

文件监听

const chokidar = require('chokidar');
chokidar.watch(dir).on('change', (path) => {
    // 同步文件变更
});

原生菜单

const menu = Menu.buildFromTemplate([...]);
Menu.setApplicationMenu(menu);

打包发布

使用 electron-builder 打包：

npm run build

体验优化

• 快捷键支持
• 系统托盘
• 自动更新
• 深色模式

Electron 的坑不少，但对于熟悉前端的开发者来说，是最快速的桌面应用开发方案。