前端开箱即用，Electron+React+Antd桌面客户端

最近在做一些Electron工程化相关工作，为了让开发更加简单高效，自己组装了一套开箱即用的桌面端工程，沉淀自己的技术。

技术栈

• 前端相关
  • “react”: “^18.2.0”,
  • “react-dom”: “^18.2.0”
  • “antd”: “^5.9.0”
  • “vite”: “^4.4.5”,
  • “typescript”: “^5.0.2”,
  • “i18next”: “^23.6.0”,
  • “react-i18next”: “^13.3.1”,
• Electron相关
  • “electron”: “^26.1.0”,
  • “electron-builder”: “^24.6.4”
  • “electron-prokit”: “^16.0.0”,
  • “@electron-prokit/create-service”: “^3.0.0”,
• node相关
  • “node”: “^16.15.0”,
  • “koffi”: “2.3.20”,
  • “lowdb”: “3.0.0”,

整体依赖

"dependencies": {
    "koffi": "2.3.20",
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@ant-design/icons": "^5.2.6",
    "@electron-prokit/create-service": "workspace:^3.0.0",
    "@types/node": "^20.5.7",
    "@types/react": "^18.2.15",
    "@types/react-dom": "^18.2.7",
    "@typescript-eslint/eslint-plugin": "^6.0.0",
    "@typescript-eslint/parser": "^6.0.0",
    "@vitejs/plugin-react-swc": "^3.3.2",
    "antd": "^5.9.0",
    "electron": "^26.1.0",
    "electron-builder": "^24.6.4",
    "electron-prokit": "workspace:^16.0.0",
    "esbuild": "^0.19.2",
    "esbuild-plugin-polyfill-node": "^0.3.0",
    "eslint": "^8.45.0",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-react-refresh": "^0.4.3",
    "i18next": "^23.6.0",
    "lowdb": "3.0.0",
    "minimist": "^1.2.8",
    "react-i18next": "^13.3.1",
    "react-router-dom": "^6.15.0",
    "ts-node": "^10.9.1",
    "typescript": "^5.0.2",
    "vite": "^4.4.5",
    "vite-plugin-node": "^3.0.2"
  }

源码

https://github.com/Xutaotaotao/electron-prokit

文档地址

https://xutaotaotao.github.io/electron-prokit/zh/

依赖安装

git clone https://github.com/Xutaotaotao/electron-prokit.git

pnpm i

pnpm run dev

效果展示

• 暗黑模式 + English

• 明亮模式 + 中文

现已支持功能

• 窗口创建管理: 管理整个窗口相关的生命周期
• 跨进程通信: 各个进程之间通信处理
• Http请求: 网络请求封装
• 跨语言调用: 调用DLL
• 定时任务管理器: 管理一些定时任务
• 本地数据存储: 本地数据持久化
• 多语言集成
• 主题模式切换
• 页面keepAlive
• 开发热更新
• 打包 & 构建

打包构建

// 打包
npm run build

// 构建
npm run compile

总结

• 本工程主要为了构建一个Electron生态工具，前端页面其实比较简单
• 现阶段核心的功能已经实现，可以在企业级的桌面端中进行应用开发
• 通过Vite 构建核心服务，让开发更加高效
• 使用 TypeScript 开发，提供完整的类型定义文件，但是有些地方还是不够强，需要改善。