使用 Vite 搭建 Electron 项目开发环境

本文首发同名微信公众号：前端徐徐

大家好，我是徐徐。今天我们要讲的是如何用 Vite 构建一个 Electron 项目。

前言

最近准备重写 Electron 相关的实战教程，一年前在掘金上写过相关的文章，现在看来都太过粗糙，大部分东西都是为了记录写下的，并没有系统整理过相关的内容，自己一直在工作中做 Electron 相关的开发，最近又有了一些新的感悟以及相关的实践总结，所以决定从各个方面去写一下相关的实战教程，打算每一篇文章都把自己的思路讲明白，然后附上相应的源码。这一篇文章是讲如何用使用 Vite 搭建 Electron 项目开发环境。

初始化项目

我们这里初始化项目直接从 npm init 开发，不用任何脚手架，这样构建出来的项目才是最干净的最自由的项目，你可以随心所欲配置任何内容。另外通过从 0 去搭建项目会让你对项目架构有更加清晰的认知，对项目的启动入口和方式有更加深入的认识，知道这个程序的入口程序在哪里，也了解如何输出的，编程最重要的点就是正确地识别输入和输出。下面我们可以正式开始了！

首先在项目根目录执行命令行 npm init。

这样我们就开启了一个项目。

更多关于 npm init 的内容可参考：https://docs.npmjs.com/cli/v10/commands/npm-init

规划项目结构

在一个 Electron 项目中，如果按照核心功能来划分的话大概会有这几个大块：主进程，渲染进程，preload。主进程和渲染进程公用的模块，主进程主要是一些和底层以及 electron 一些主进程的 api 内容构成的；渲染进程主要是跟常规 Web 应用相关的内容；preload 是一个特殊的模块，主要是为了将 Electron 的不同类型的进程桥接在一起；主进程和渲染进程公用的模块，这个就是主进程和渲染进程公用的一些源码。

上面说的只是按照功能层面去划分的核心目录，当然在正常的开发中肯定还必不可少一些基础的文件目录，比如一些脚本文件，环境配置，静态资源，以及常规的配置文件。下面是我们整个项目的结构目录。

electron-proplay
├─ resource（需要打包到安装包内的资源，这些资源不会被编译）
├─ scripts（工程调试、编译过程中需要使用的脚本文件）
├─ node_modules（依赖包目录）
├─ vite（vite 相关的配置）
├─ src（源码）
│  ├─ common（主进程与渲染进程公用的源码）
│  ├─ main（主进程源码）
│  └─└─ index.ts（主进程入口文件）
│  ├─ renderer（渲染进程源码）
│  │  ├─ assets（一起编译打包的静态资源）
│  │  ├─ components（全局公共组件）
│  │  ├─ pages（整个应用的所有页面，包含子页面或子控件则以页面名设置子目录）
│  │  ├─ store（放置公共模块）
│  │  ├─ utils （工具类：toast、alert、i18n等）
│  └──└─ index.ts（渲染进程入口文件）
│  ├─ preload（前置脚本）
│  └──└─ index.ts
├─ .vscode（vscode配置文件）
├─ .prettier（beautify的配置文件，用于团队源码风格一致）
├─ .npmrc（项目环境变量，主要是一些镜像源地址的配置）
├─ .gitignore（git排除文件）
├─ .nvmrc（nvm版本配置文件）
└─ package.json

对于上面的目录结构，常规的 electron 应用应该大致都是这些东西，当然各自会有差别，这个完全看自己的习惯。梳理好了项目目录结构，后面久只管填充内容就行。

安装依赖

现在我们需要安装依赖来满足我们构建应用的需求，我们先分一个类，这样的话好区分相关的依赖作用。

工程类：eslint、typescript、prettier、vite

核心业务：electron、react

ts 初始化

yarn add typescript -D
npx tsc --init

初始化成功之后会有 tsconfig.json 文件。

更多可参考：https://www.typescriptlang.org/download/

eslint 初始化

npm init @eslint/config@latest

初始化成功之后会有 eslint.config.mjs 文件。

更多可参考：https://eslint.org/docs/latest/use/getting-started

prettier 初始化

yarn add --dev --exact prettier
node --eval "fs.writeFileSync('.prettierrc','{}\n')"

初始化成功之后会有 .prettierrc 文件。

更多可参考：https://prettier.io/docs/en/install.html

安装vite，electron，react

yarn add vite electron react react-dom -D

设置项目配置

通过上面的依赖安装我们基本上就可以开启一个最基础的 electron 项目了，但是在这之前我们需要做一些项目的常规配置，比如 ts 的设置，prettier 规则的设置，git 忽略文件，nvm 配置等。

TS 配置

对于 TS 配置，我们可以先用他默认生成的配置，如果后期有需求，可以对相应的配置做改动或者放开相应的注释

ESlint 配置

ESlint 的配置我们也先用默认生成的配置。

prettier 设置

这里先用个常用的配置，如果后期有需求再改动。

{
  printWidth: 80, //单行长度
  tabWidth: 2, //缩进长度
  useTabs: false, //使用空格代替tab缩进
  semi: true, //句末使用分号
  singleQuote: true, //使用单引号
  quoteProps: 'as-needed', //仅在必需时为对象的key添加引号
  jsxSingleQuote: true, // jsx中使用单引号
  trailingComma: 'all', //多行时尽可能打印尾随逗号
  bracketSpacing: true, //在对象前后添加空格-eg: { foo: bar }
  jsxBracketSameLine: true, //多属性html标签的‘>’折行放置
  arrowParens: 'always', //单参数箭头函数参数周围使用圆括号-eg: (x) => x
  requirePragma: false, //无需顶部注释即可格式化
  insertPragma: false, //在已被preitter格式化的文件顶部加上标注
  proseWrap: 'preserve',
  htmlWhitespaceSensitivity: 'ignore', //对HTML全局空白不敏感
  vueIndentScriptAndStyle: false, //不对vue中的script及style标签缩进
  endOfLine: 'lf', //结束行形式
  embeddedLanguageFormatting: 'auto', //对引用代码进行格式化
};

git 忽略配置

.gitignore文件

node_modules
*.log
*.log*
build
dist
.DS_Store
.idea

nvm 配置

.nvmrc 文件，方便进去项目直接切换对应的 Node 版本。

v20.16.0

这个可以使用 VSCODE 的插件 vsc-nvm，具体可参考 https://marketplace.visualstudio.com/items?itemName=henrynguyen5-vsc.vsc-nvm

npm 源配置

主要设置下载源，为后期更加快速的添加其他的依赖以及加快 Electron 的下载。

registry=https://registry.npmmirror.com
ELECTRON_MIRROR=https://npmmirror.com/mirrors/electron/
ELECTRON_BUILDER_BINARIES_MIRROR=https://npmmirror.com/mirrors/electron-builder-binaries/

构建 Vite 服务

把上面的配置好之后我们需要通过构建 Vite 服务来完成我们整个项目最核心的搭建。这里需要做三件事情，第一个是对各个进程编写最简单的代码，第二个是对各个进程进行 Vite 服务的配置，第三是编写脚本去启动各个进程的服务。

进行 Vite 服务配置

创建 vite 目录，然后再在下面创建 main.js，render.js，preload.js，service.js四个文件，分别用于主进程的配置，渲染进程的配置，前置脚本的配置以及构建 Vite 服务的方法。

vite/main.js

import {
   
    cwd } from "process";
import path from "path";
import {
   
    builtinModules } from "module";
import {
   
    fileURLToPath } from "url";
import {
   
    defineConfig } from "vite";


const __dirname = fileURLToPath(new URL(".", import.meta.url));

const sharedResolve = {
   
   
  alias: {
   
   
    "@": path.resolve(__dirname, "../src"),
  },
};

export default defineConfig({
   
   
  root: path.resolve(__dirname, "../src/main"),
  envDir: cwd(),
  resolve: sharedResolve,
  build: {
   
   
    outDir: path.resolve(__dirname, "../dist/main"),
    minify: false,
    lib: {
   
   
      <