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

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


相关推荐
weixin_427771611 小时前
css font-size 的妙用
前端·css
凤凰战士芭比Q2 小时前
web中间件——Nginx
前端·nginx·中间件
一 乐2 小时前
点餐|智能点餐系统|基于java+ Springboot的动端的点餐系统小程序(源码+数据库+文档)
java·前端·数据库·vue.js·spring boot·小程序·论文
bitbitDown3 小时前
从零打造一个 Vite 脚手架工具:比你想象的简单多了
前端·javascript·面试
liangshanbo12153 小时前
CSS 数学函数完全指南:从基础计算到高级动画
前端·css
码上成长4 小时前
GraphQL:让前端自己决定要什么数据
前端·后端·graphql
冴羽4 小时前
为什么在 JavaScript 中 NaN !== NaN?背后藏着 40 年的技术故事
前端·javascript·node.js
久爱@勿忘5 小时前
vue下载项目内静态文件
前端·javascript·vue.js
前端炒粉5 小时前
21.搜索二维矩阵 II
前端·javascript·算法·矩阵
合作小小程序员小小店5 小时前
web网页开发,在线%台球俱乐部管理%系统,基于Idea,html,css,jQuery,jsp,java,ssm,mysql。
java·前端·jdk·intellij-idea·jquery·web