全栈视角重塑 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 的认知,用真正「工程化」的方式开发桌面应用。

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


相关推荐
仟濹3 小时前
【HTML】基础学习【数据分析全栈攻略:爬虫+处理+可视化+报告】
大数据·前端·爬虫·数据挖掘·数据分析·html
小小小小宇4 小时前
前端WebWorker笔记总结
前端
小小小小宇5 小时前
前端监控用户停留时长
前端
小小小小宇5 小时前
前端性能监控笔记
前端
烛阴5 小时前
Date-fns教程:现代JavaScript日期处理从入门到精通
前端·javascript
全栈小55 小时前
【前端】Vue3+elementui+ts,TypeScript Promise<string>转string错误解析,习惯性请出DeepSeek来解答
前端·elementui·typescript·vue3·同步异步
穗余6 小时前
NodeJS全栈开发面试题讲解——P6安全与鉴权
前端·sql·xss
穗余7 小时前
NodeJS全栈开发面试题讲解——P2Express / Nest 后端开发
前端·node.js
航Hang*7 小时前
WEBSTORM前端 —— 第3章:移动 Web —— 第4节:移动适配-VM
前端·笔记·edge·less·css3·html5·webstorm
江城开朗的豌豆7 小时前
JavaScript篇:a==0 && a==1 居然能成立?揭秘JS中的"魔法"比较
前端·javascript·面试