🖥️ Electron应用全流程实践之一：环境搭建

前言

Electron开发对于前端开发者来说已经不再是新鲜事物。尽管如此，随着新的开发工具的不断涌现，Electron开发过程仍然有很多新的事物值得我们去学习和探索。在这个系列文章中，我将结合一些相对较新的Electron开发工具，从零开始，逐步指导你如何开发出一个完整的Electron应用。

在这个系列的第一篇文章中，我将介绍环境搭建阶段的两个工具：electron-vite和volta。这两个工具在Electron开发中发挥着重要的作用，可以帮助我们更有效地搭建和管理开发环境。

electron-vite简介

官网地址：cn.electron-vite.org/

vite在过去的几年里如日中天，相信大家都已经领略过vite的魅力。electron-vite便是结合了vite的一款electron脚手架工具，它带来了更快、更精简的开发体验。

Electron 是一个基于 Chromium 和 Node.js 构建跨平台桌面应用程序的框架，electron-vite 最重要的特性是提供了通过使用vite同时处理这两个环境的代码的能力。

electron-vite 在运行时会直接打包主进程和预加载脚本源码，但是对于渲染器来说，会启动一个 dev server 来使用 Vite 的 HMR，这将极大地提高 Electron 的开发效率。

Volta简介

官网地址：volta.sh/

Volta是一款由Rust开发的JavaScript命令行管理工具，具有快速稳定、项目绑定命令行环境、跨平台等特性。简单来说，我们可以将它视为一个Node版本管理工具 ，用以替代nvm等工具。除此之外，Volta还提供了项目绑定特定Node版本、Yarn版本的特性（我们将在后续介绍中进一步讲解这一点），能使我们在开发时无需过多关注Node引擎的选择和切换。

创建项目

我们使用create 命令来创建一个新的electron-vite项目：

sql 复制代码

yarn create @quick-start/electron

electron-vite内置了丰富的模板，这里我们选择使用react+ts的组合：

环境固定

在使用electron进行开发时，我们可能遇到项目依赖的node环境与全局node环境不一致 的情况。这可能导致开发服务器无法启动或项目无法打包等问题。频繁手动切换node版本非常麻烦 ，因此我们可以选择使用volta这款工具来绑定我们项目的依赖环境。

在mac中，我们可以通过如下命令来全局安装volta：

arduino 复制代码

curl <https://get.volta.sh> | bash

windows下的安装方式参见链接。

接下来我们在项目根目录执行以下命令来绑定node版本、yarn版本：

kotlin 复制代码

volta pin node@18.16.0
volta pin yarn@1.22.19

此时可以看到，package.json文件底部多出了绑定的版本信息：

json 复制代码

{
...
"volta": {
    "node": "18.16.0",
    "yarn": "1.22.19"
  }
}

这样，所有全局安装了volta 的用户在本项目下执行命令时，都会使用已绑定的node版本以及yarn版本：

项目目录

接下来，我们再简单介绍下electron-vite 的目录结构：

src 中存放了我们应用开发阶段的核心代码
- src/main 存放夹包含主进程的代码逻辑
- src/preload 存放预加载脚本代码
- src/renderer 存放渲染进程代码
build 用于存放构建期间使用的资源
resources 用于存放主进程以及预加载脚本所使用到的资源
electron.vite.config.ts 用于对electron-vite进行配置
tsconfig.node.json 用于对主进程以及预加载脚本typescript进行配置
tsconfig.web.json 用于对渲染进程typescript进行配置
electron-builder.yml 用于对构建工具electron-builder进行配置
dev-app-update.yml 用于对应用更新工具进行配置

其他的诸如prettier、eslint、npmrc 这些文件大家应该都不陌生，这里不做过多介绍。

当然，你也不必特意遵循这个目录结构。通过在electron.vite.config.ts 进行特定配置，中可以自定义文件入口，详见链接。

结语

至此，我们已经完成了Electron应用的环境搭建，对项目也有了简单的认识。对于electron-vite、volta这里也只是简单的对他们进行了介绍。如果大家想要在开发中使用这两款工具，请大家务必记得去官网阅读他们的文档，以便对它们有更全面、深入的认识，这样才能在运用它们时得心应手。

在下一篇文章中，我们将深入了解Electron应用的开发过程，包括主进程、渲染进程以及它们之间的通信、请求处理等等。希望这个系列的文章能帮助你在Electron应用开发的道路上更进一步。