创建React+Vite+TypeScript+Electron项目

本文介绍了如何创建Vite+React+TypeScript+Electron桌面应用项目，使用到Vite作为前端构建工具，Electron框架用来构建桌面应用程序。该部分相对来说还是比较简单的，主要流程大体分为：创建react项目、安装electron、配置electron。本文基于以上流程的基础上记录了一些搭建过程中可能会遇到的bug以及一些小细节。

一、创建React项目

1.创建React+Vite+TypeScript项目

使用npm create vite@latest 命令创建vite项目（注意：使用的node版本是20.10.0），根据步骤先输入你的项目名称，框架使用React，并为项目安装TypeScript。使用终端创建项目的过程如下图：

2.运行项目

在vscode中打开该项目，

然后在vscode中新建终端使用yarn或npm install命令安装依赖，（建议使用yarn，文档后续将统一使用yarn）。依赖安装完成后在终端中使用yarn dev命令即可启动项目。

复制箭头所示链接在浏览器中打开，浏览器中显示如下图即为创建成功了。

二、electron安装与配置

1.安装electron

在终端中使用yarn add electron@29.0.0命令安装，如果安装过程中出现如下报错，

则在项目根目录中新建.npmrc文件，并在里面添加下面内容：

# 将pnpm变成扁平化架构，pnpm专用
node-linker=hoisted
# 设置阿里仓库源
registry="https://registry.npmmirror.com"
# 在国内使用pnpm安装electron需要配置一下electron的下载路径
ELECTRON_MIRROR="https://npmmirror.com/mirrors/electron/"

配置完成后重新在终端中输入yarn add electron@29.0.0命令即可安装成功，打开项目根目录下的package.json文件，看到如下图中的就代表安装成功了。

2.electron配置

(1) 应用入口

在根目录下新建electron文件夹，在文件夹中新建main.ts文件，在该文件中添加以下内容：

const { app, BrowserWindow, Menu } = require("electron");
const path = require('path');
const url = process.env.VITE_DEV_SERVER_URL;
const indexHtml = path.join(__dirname, "../dist", "index.html");
const createWindow = async () => {
    const win = new BrowserWindow({
        width: 1300,
        height: 720,
        frame: true,
        webPreferences: {
            preload: path.join(__dirname, 'preload.js')
        }
    });
    Menu.setApplicationMenu(null);
    if (process.env.VITE_DEV_SERVER_URL) {
        win.loadURL(url);
        // 打开控制台
        win.webContents.openDevTools();
    } else {
        win.loadFile(indexHtml);
    }
};
// 创建窗口
app.whenReady().then(() => {
    createWindow();
    app.on("activate", () => {
        if (BrowserWindow.getAllWindows().length === 0) createWindow();
    });
});

// 关闭窗口
app.on("window-all-closed", () => {
    if (process.platform !== "darwin") {
        app.quit();
    }
});

(2) 预加载文件

在刚刚新建的electron文件夹中新建preload.ts文件，在文件中添加以下代码：

const { contextBridge } = require('electron')

contextBridge.exposeInMainWorld('versions', {
    node: () => process.versions.node,
    chrome: () => process.versions.chrome,
    electron: () => process.versions.electron
    // 除函数之外，我们也可以暴露变量
})

(3) 警告消除

在刚刚的ts文件中添加代码时，我们会看到以下警告：

打开根目录下的.eslintrc.cjs文件，在该文件中添加以下代码：
'@typescript-eslint/no-var-requires': 0,
如下图所示：

这样，我们在ts文件中使用require就不会报错了。

(4) vite.config.ts

接下来在终端中使用yarn add vite-plugin-electron命令安装插件，安装完成后打开vite.config.ts文件添加如下代码：

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import electron from "vite-plugin-electron";
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react(), electron([{
    entry: "electron/main.ts",
    vite: {
      build: {
        outDir: "dist-electron"
      }
    }
  }, {
    entry: "electron/preload.ts",
    vite: {
      build: {
        outDir: "dist-electron"
      }
    }
  }])],
  base: './',
  build: {
    emptyOutDir: false, // 默认情况下，若 outDir 在 root 目录下，则 Vite 会在构建时清空该目录
  }
})

(5) package.json

打开根目录下的package.json文件，添加以下代码：

  "main": "dist-electron/main.js",
  "license": "MIT",
  "author": "qian <1513296349@qq.com>",
  "description": "this is description",

其中author和description可以根据自己情况添加，但main和license必须添加，且删除原有的"type":“module”。
如下图所示：

(6) 运行

完成以上步骤后，在终端使用yarn dev命令后即可启动项目，当桌面上弹出这样一个窗口就证明配置成功了。