搭建一个electron开源项目(react、Vite 和 TypeScript) 的框架选择

背景

如何选择适合你的项目框架？随着技术的不断发展，选择适合自己的项目脚手架变得越来越重要。本文将介绍如何使用Electron、React和Vite搭建一个开源截图、录屏和录像的跨平台桌面软件------pear-rec(梨子录像)，并分享一些选择项目脚手架的思考方式。

技术

node.js
vite
react
electron

技术介绍

Electron是一个跨平台的桌面应用程序开发框架，它使用HTML、CSS和JavaScript构建桌面应用程序。
React是一个用于构建用户界面的JavaScript库，它提供了组件化开发的方式，使得UI开发变得更加简单和可维护。
Vite是一个快速的零配置工具，用于在开发过程中快速搭建前端项目。它内置了热模块替换（HMR）和按需编译，提供了一种现代化的前端开发体验。

框架介绍

下面我将简单的讲解一下，几个常用的开源脚手架的使用和优缺点对比。和我的踩坑经历，当然也有可能是我技术比较菜 ，如有不对的地方欢迎大佬纠正 ，以下观点仅代表本人个人观点 ，如有不同见解，那你是对的，不用争论。

Electron Forge

Electron Forge 是一款用于打包和分发 Electron 应用程序的一体化工具。它结合了许多单一用途的包来创建一个开箱即用的完整构建管道，包括代码签名、安装程序和工件发布。

快速开始

Electron Forge是 electron 官方推荐的开源脚手架。也是我第一个使用的框架。

js 复制代码

// 模板生成项目
npm init electron-app@latest my-new-app -- --template=vite

// 启动 my-new-app
cd my-app
npm start

活跃度

github：开源代码库 star: 5.7K、fork: 461、最后代码提交一个月前。

npm：主要组件(@electron-forge/core)当前周下载Weekly Downloads: 80,995。当前版本v 6.2.1

特点和功能

electron 官方推荐
社区活跃
有文档
有模板，可以直接命令行生成
支持react 和 vue
支持 vite 和 webpack
支持 Typescript
应用程序打包 ( electron-packager)

弯路：

模板有局限，无法直接生成一个react + vite + Typescript 的模板, 需要自己看文档配置。不是很方便。
文档是英语的
无法实现 electron 热修改, 每次修改后需要重新编译。
编译比较慢

vite-react-electron

vite-react-electron 是一个用于快速搭建Electron应用程序的项目脚手架，它结合了Vite、React和Electron，提供了现代化的前端开发体验和强大的功能。

快速开始

lua 复制代码

npm create electron-vite

├── electron                                 Electron 源码文件夹
│   ├── main                                 Main-process 源码
│   └── preload                              Preload-scripts 源码
│
├── release                                  构建后生成程序目录
│   └── {version}
│       ├── {os}-{os_arch}                   未打包的程序(绿色运行版)
│       └── {app_name}_{version}.{ext}       应用安装文件
│
├── public                                   同 Vite 模板的 public
└── src                                      渲染进程源码、React代码

活跃度

electron-vite-react 的 github：开源代码库 star: 1.1K、fork: 134、最后代码提交三个月前。

electron-vite 的 github：开源代码库 star: 1.3K、fork: 72、最后代码提交一天前。

特点和功能

Vite的快速开发：vite-react-electron使用Vite作为前端开发工具，它使用ESM（ES Modules）搭建了一个快速的开发服务器，拥有热模块替换（HMR）和按需编译等功能。这使得前端开发变得更加高效和快速。
React的强大UI库：vite-react-electron使用React作为前端的UI库，React提供了组件化开发的方式，使得构建用户界面更加简单和可维护。开发者可以利用React的生态系统来构建具有复杂交互和动态数据展示的应用。
Electron的跨平台桌面应用开发：vite-react-electron将Vite和React框架与Electron集成，使开发者能够使用前端技术栈构建跨平台的桌面应用程序。Electron提供了与操作系统进行交互的能力，使得开发者可以开发原生桌面应用的功能和特性。
简单的项目配置和脚本：vite-react-electron提供了一个简单的项目配置文件和命令行脚本，可以自动化构建和启动Electron应用程序。它默认配置了常用的设置，让开发者能够快速上手并开始项目开发。
支持热更新和调试：vite-react-electron支持热模块替换（HMR），允许在开发过程中实时更新代码和查看修改结果。它还集成了开发者工具，可以方便地进行调试和性能优化。

对比

Electron Forge和vite-react-electron是两个常用的工具，用于快速搭建Electron、React和Vite的项目。下面将对它们进行对比：

1. 功能和易用性：

Electron Forge：是一个全功能的Electron项目脚手架，提供了用于构建、打包和发布Electron应用程序的命令行工具。它还包含了常用的插件和预设，使得构建Electron应用程序变得更加简单和高效。它提供了一个统一的命令行界面，可以轻松管理您的Electron项目。

vite-react-electron：是一个基于Vite的React和Electron项目脚手架。它结合了Vite的快速开发体验和React的强大UI组件库，为开发者提供了现代化的前端开发环境。它通过配置文件和脚本自动化构建和启动Electron应用程序，并提供了开箱即用的React和Electron集成。

2. 社区支持：

Electron Forge拥有庞大的社区支持和用户群体。它有广泛的文档、教程和优秀的插件生态系统，使得开发者可以快速上手并解决问题。

vite-react-electron相对较新，具有较小的社区和用户群体。但随着Vite和React的流行，其社区支持正在不断增长，并且有一些很好的教程和示例可供参考。

3. 学习曲线：

Electron Forge相比较而言，学习曲线较为陡峭。使用它需要对Electron的基本概念和工作原理有一定的了解，并了解如何配置和使用Electron Forge的工具和插件。

vite-react-electron相对来说学习曲线较为平缓。Vite提供了零配置的开发环境，React是非常流行的前端框架，对于熟悉这两个工具的开发者来说，使用vite-react-electron可以较快上手。

4. 生态和插件支持：

Electron Forge具有丰富的插件和预设，例如自动更新、打包优化等。它还与其他工具和服务（如CI/CD工具）集成得非常好，使得开发者可以轻松地使用其他工具来增强和扩展Electron Forge的功能。

vite-react-electron的插件生态系统相对较小。但由于Vite的模块化特性，可以很容易地通过导入模块来扩展和定制vite-react-electron。

总结

综上所述，Electron Forge是一个成熟、功能丰富的Electron项目脚手架，适合需要全面的Electron支持的项目。vite-react-electron则更适合那些熟悉Vite和React的开发者，并且对快速开发和现代化的开发体验有更高的需求。因此，在选择适合你的项目的框架时，需要考虑你的项目需求、技术栈熟悉度和对工具的要求。

Q&A

Q: 文章中的开源截图、录屏和录像的跨平台桌面软件------pear-rec(梨子录像)，有源码吗？

当然有，地址如下：github.com/027xiguapi/...，有兴趣的话可以大家一起探讨，同时也欢迎大家fork和star