全栈视角重塑 Electron 应用开发体验:Nest 架构、多窗口、IPC 通信全解耦

🚀 打造下一代 Electron 应用架构:Nest 风格的主进程、声明式多窗口、类型安全 IPC 全解耦!

👉 项目地址:
🔗 https://github.com/X29w/electronest

在日常开发 Electron 应用的过程中,你是否遇到过以下问题:

  • 🧩 主进程代码凌乱、难以组织,无法复用?
  • 🔄 IPC 通信零散、难以管理、没有类型提示?
  • 🪟 多窗口管理全靠硬编码,创建逻辑分散难以扩展?
  • 🧪 preload 与 contextBridge 配置困难,容易踩坑?

如果你曾为这些问题感到头痛,那么你一定会喜欢我打造的这个项目 ------ Electronest


🎯 项目初衷:把 Electron 当「后端」来写

我一直认为 Electron 主进程更像是"后端",但遗憾的是大多数项目只是把它当成了「窗口启动器 + IPC 注册器」。因此,我尝试用 NestJS 架构思想 重新组织 Electron 主进程,结合现代构建工具 Vite,构建出一个具备「高内聚、强拓展、强类型」能力的 Electron 应用模板。


🧠 项目核心亮点

1️⃣ 主进程模块化架构,向 NestJS 看齐

你可以像写 NestJS 一样构建主进程:

kotlin 复制代码
@Module({
  providers: [SomeService],
  controllers: [SomeController],
})
export class SomeModule {}
  • 支持 @Injectable() 注入依赖
  • 支持生命周期钩子(如 onModuleInit
  • 支持多模块自动注册
  • 解耦主进程逻辑、提升可测试性

2️⃣ IPC 通信,类型安全、装饰器风格

通过 @IPCHandle('channel') 注册主进程的处理器:

lua 复制代码
@IPCHandle('file.read')
handleReadFile(path: string): string {
  return fs.readFileSync(path, 'utf-8')
}

渲染进程通过类型安全的 API 调用:

javascript 复制代码
const result = await window.electronAPI.invoke('file.read', 'test.txt')

✅ 自动类型推导

✅ 无需手动注册 handler

✅ 统一管理通信逻辑


3️⃣ 声明式多窗口系统,解放繁琐逻辑

每一个窗口只需用装饰器声明:

scala 复制代码
@RegisterWindow('settings')
export class SettingsWindow extends BaseWindow {
  override options = {
    width: 800,
    height: 600,
    preload: 'settings',
    url: '/settings',
  };
}

在主进程中一行代码批量注册:

kotlin 复制代码
@AutoRegisterWindows([MainWindow, SettingsWindow])
export class WindowModule {}
  • 📦 支持独立 preload
  • 🔁 跨窗口通信支持
  • 🔍 支持按名称访问窗口实例,便于逻辑复用

4️⃣ 极速开发体验 + 打包集成

  • 使用 electron-vite,极速构建体验
  • 使用 electron-builder 支持一键打包为 .exe/.dmg/.AppImage
  • 默认配置安全的 contextIsolation + preload

🧱 项目结构清晰,开发体验丝滑

bash 复制代码
electronest/
├── main-thread/        # 主进程逻辑(类似 NestJS 的 AppModule)
├── preload/            # 各窗口 preload 脚本
├── render-thread/      # 前端界面(React/Vite)
├── nest-server/        # 可选内嵌 Nest 服务(本地服务等)
  • 完全 TypeScript 项目,内置类型提示与路径别名
  • 使用 pnpm + vite 管理依赖,开发体验超丝滑

📦 快速开始

bash 复制代码
git clone https://github.com/X29w/electronest.git
cd electronest
pnpm install
pnpm dev

🛣️ 后续计划

  • ✅ 多窗口自动注册 ✔️
  • ✅ IPC 注入模块 ✔️
  • 🧩 动态模块加载机制(主进程微服务)
  • 🧪 单元测试体系(jest + mock contextBridge)
  • 🌐 内嵌 WebSocket/Nest 服务

🧑‍💻 谁适合使用这个项目?

  • 熟悉 NestJS、希望统一主进程架构的开发者
  • 希望构建多窗口、复杂通信结构的 Electron 应用
  • 注重代码质量与扩展性的前端/全栈工程师

🧾 项目地址

GitHub:

🔗 github.com/X29w/electr...

如果你喜欢这个项目,欢迎:

  • ⭐️ Star 支持
  • 🐛 提 issue 反馈
  • 🚀 一起参与开发

✨ 写在最后

Electron 不是一个"玩具",而是可以承载复杂业务逻辑的跨平台桌面平台。希望这个项目能帮助你重构对 Electron 的认知,用真正「工程化」的方式开发桌面应用。

如果你有任何建议、想法,欢迎评论或私信我一起探讨!


相关推荐
Moment17 分钟前
Next.js 15.5 带来 Turbopack Beta、Node 中间件稳定与 TypeScript 强化 🚀🚀🚀
前端·javascript·react.js
yzzzzzzzzzzzzzzzzz39 分钟前
初识javascript
前端·javascript
excel2 小时前
硬核 DOM2/DOM3 全解析:从命名空间到 Range,前端工程师必须掌握的底层知识
前端
专注API从业者9 小时前
Python + 淘宝 API 开发:自动化采集商品数据的完整流程
大数据·运维·前端·数据挖掘·自动化
烛阴10 小时前
TypeScript高手密技:解密类型断言、非空断言与 `const` 断言
前端·javascript·typescript
样子201810 小时前
Uniapp 之renderjs解决swiper+多个video卡顿问题
前端·javascript·css·uni-app·html
Nicholas6811 小时前
flutterAppBar之SystemUiOverlayStyle源码解析(一)
前端
黑客飓风11 小时前
JavaScript 性能优化实战大纲
前端·javascript·性能优化
emojiwoo12 小时前
【前端基础知识系列六】React 项目基本框架及常见文件夹作用总结(图文版)
前端·react.js·前端框架
张人玉13 小时前
XML 序列化与操作详解笔记
xml·前端·笔记