electron 开发经验之谈系列-技术栈简介及选择

本文最后更新于:2021年3月2日 上午

技术栈

  • electron: 跨平台桌面开发
  • react: 视图层框架
  • typescript: 强类型的 js
  • lerna: 前端 monorepo 管理工具
  • yarn: 包管理器,workspace 与 lerna 搭配非常好
  • create-react-app: react 官方出品的 react 脚手架生成器,社区和活跃度都不是其它工具可比的

其他依赖库

参考: 前端资源管理

  • rollup: 前端库打包工具
  • electron-builder: electron 打包工具
  • is-electron: 在渲染层判断是否为 electron 环境的微型库
  • fs-extra: nodejs api 的 Promise 化封装
  • react-use: react 中的通用 hooks 库
  • @liuli-util/*: 吾辈个人的一系列通用工具库
  • jest: 单元测试工具
  • wallaby.js: 单元测试 IDE 集成
  • gulp: 流式任务管理工具
  • electron-store: 主进程和渲染层通用的 k-v 存储
  • electron-reloader: electron 热更新工具
  • electron-devtools-installer: electron 插件安装工具
  • utility-types: typescript 通用类型库

选择动机

  • electron: 想必来看到这篇文章的人都无需解释,基于 web 技术的跨平台足以解释一切。
  • react: 吾辈无意争论框架优劣,但 react 确实是目前最流行的解决方案,所以吾辈选择了它。
  • typescript: 由于吾辈有着 Java 后端的经验,所以对强类型情有独钟。
  • lerna: 这个确实需要解释一下,electron 应用分为主进程和渲染层,一般示例中是将它们在一个项目中通过目录区分,但这种隔离性并不好,还会污染 package.json。这时候就到了 lerna 出场了,它是由 babel 的作者开发,专门用以解决前端没有多模块工程的问题。

    PS1: 老实说,吾辈很想念 Java maven 多模块的支持,可以非常简单的抽取模块出来。
    PS2: 前端有名的 electron-react 示例项目 electron-react-boilerplate 就是单模块的。

  • electron-builder: electron 官方其实更推荐 Electron Forge,但目前而言,electron-builder 更好。