electron-vite初始化react桌面端应用

electron官方并没有给我们一个脚手架去初始化react项目，经过搜索，发现了electron-vite初始化，使用脚手架帮我们初始化项目有如下几处优点：

会帮我们处理好运行代码的基础等配置
会帮我们初始化一个项目模板
帮我们配置好pitter和eslint
配置好打包

初始化项目

shell 复制代码

yarn create @quick-start/electron

执行该命令之后我们会进入配置项：

项目名称

shell 复制代码

? Project name: electron_react_demo

项目对应框架

shell 复制代码

? Select a framework: 
    vanilla
    vue
    react
    svelte
    solid

这里选择的是react，当然也可以使用其他的

是否使用ts

shell 复制代码

? Add TypeScript? >> No / Yes

根据自己的情况是否选择ts

是否添加electron updater插件

shell 复制代码

? Add Electron updater plugin? >> No / Yes

选择yes

是否开启electron镜像代理

shell 复制代码

? Enable Electron download mirror proxy? >> No / Yes

这里建议选择yes使用镜像代理，否则可能会在下载依赖的时候因为网络原因而导致下载失败

常用命令

启动命令

shell 复制代码

yarn dev

预览命令

shell 复制代码

yarn start

这个命令是预览命令，就是在浏览器上查看我们写的代码运行结果

打包命令

shell 复制代码

yarn build:xxx

xxx指的是使用打包的目标平台，比如win/mac/linux

目录结构

bash 复制代码

    ├─ /.vscode
    ├─ /build
    ├─ /node_modules
    ├─ /out
    ├─ /resources
    ├─ /src
    |  ├─ /main
    |  ├─ /preload
    |  ├─ /renderer
    |  |  ├─ /src
-   |  |  |  ├─ /assets
    |  |  |  ├─ /components
-   |  |  |  |  └─ Versions.tsx
    |  |  |  ├─ App.tsx
    |  |  |  └─ main.tsx
    |  |  └─ index.html
    ├─ .editorconfig
    ├─ .eslintignore
    ├─ .eslintrc.cjs
    ├─ .gitignore
    ├─ .npmrc
    ├─ .prettierignore
    ├─ .prettierrc.yaml
    ├─ dev-app-update.yml
    ├─ electron-builder.yml
    ├─ electron.vite.config.js
    ├─ package.json
    ├─ README.md
    └─ yarn.lock

main是主线程，即应用程序的入口，主线程运行在node.js环境，可以使用node的所有api renderer是渲染进程，就是我们平常写的前端存放的位置 preload是预加载脚本，是渲染进程和主线程通信的桥梁同时我们看上述的文件夹结构，发现有两个src文件夹，这样感觉有点层级过深了，所以我们就修改一下目录去掉render的src目录，将原本的src目录里边的文件放到renderer文件中

bash 复制代码

...（略）
|  ├─ /renderer
|  |  ├─ /components
|  |  ├─ App.tsx
|  |  ├─ index.html
|  |  └─ main.tsx
|  |  └─ env.d.ts
...（略）

文件夹删除过后，需要修改一下其他文件的引用路径 App.tsx

tsx 复制代码

function App(): JSX.Element {
  return (
    <div className="container">
     app
    </div>
  )
}

export default App

main.tsx

tsx 复制代码

import React from 'react'
import ReactDOM from 'react-dom/client'
import { BrowserRouter } from 'react-router-dom'
import './assets/index.css'
import App from './App'

ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
  <React.StrictMode>
      <App />
  </React.StrictMode>
)

index.html

html 复制代码

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Electron</title>
    <!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
    <meta
      http-equiv="Content-Security-Policy"
      content="default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'"
    />
  </head>

  <body>
    <div id="root"></div>
    <script type="module" src="./main.tsx"></script>
  </body>
</html>

同时需要修改electron.vite.config.ts文件，打包的入口

typescript 复制代码

import { resolve } from 'path'
import { defineConfig, externalizeDepsPlugin } from 'electron-vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  main: {
    plugins: [externalizeDepsPlugin()]
  },
  preload: {
    plugins: [externalizeDepsPlugin()]
  },
  renderer: {
    resolve: {
      alias: {
        // 修改的是这里
        '@renderer': resolve('src/renderer')
      }
    },
    plugins: [react()]
  }
})

项目其他配置

配置代理

在electron.vite.config.ts中添加renderer中添加server配置

typescript 复制代码

import { resolve } from 'path'
import { defineConfig, externalizeDepsPlugin } from 'electron-vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  main: {
    plugins: [externalizeDepsPlugin()]
  },
  preload: {
    plugins: [externalizeDepsPlugin()]
  },
  renderer: {
    resolve: {
      alias: {
        '@renderer': resolve('src/renderer')
      }
    },
    plugins: [react()],
    // 添加的是这里
    server: {
      proxy: {
        '/api': {// 这里需要记住一个事情就是我们如果引入文件时不要有/api开头，否则会走代理服务器
          target: 'http://localhost:18080',
          changeOrigin: true,
          rewrite: (path) => path.replace(/^\/api/, '')
        }
      }
    },
  }
})

使用scss

shell 复制代码

yarn add scss -D

vite默认是帮我们配置好了scss，但是需要我们自己再去下载依赖

配置格式化工具和提交代码格式化工具

项目已经帮我们下载好了pretter和配置，这里我们就不用从头配置，只需要添加钩子就行，让其在我们提交代码之前给自动帮我们格式化就行运行下边的命令用于产生提交的钩子函数

shell 复制代码

npx mrm lint-staged

在package.json文件中添加下列配置(会在commit阶段提交之前执行 lint-staged命令)

json 复制代码

"husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },

修改package.json文件中的lint-staged配置，添加ts和tsx，用于格式化ts文件和tsx文件 git提交规范

shell 复制代码

yarn add @commitlint/config-conventional @commitlint/cli -D

生成配置文件

shell 复制代码

echo "module.exports = {extends: ['@commitlint/config-conventional']}" > commitlint.config.js

注意：通过该命令生成的配置文件编码格式可能会被误认为utf-16，这就导致我们格式化的适合导致乱码错误，所以我们需要手动修改commitlint.config.js文件的编码格式为utf-8

生成钩子

shell 复制代码

npx husky add .husky/commit-msg  'npx --no -- commitlint --edit ${1}'

安装axios

shell 复制代码

yarn add axios

安装路由

shell 复制代码

yarn add react-router react-router-dom

安装redux

shell 复制代码

yarn add @reduxjs/toolkit react-redux

redux对应工具

shell 复制代码

yarn add redux-devtools -D

antd

shell 复制代码

yarn add antd

其他

控制台输出乱码

这个问题原本以为是electron配置的问题，之后添加了相关配置之后，发现问题没有解决，之后发现这个是编码问题，这时候我们就可以使用chcp来解决这个问题，它是一个计算机指令，能够显示或设置活动代码页的编号，也可以通过它来设置当前程序的字符集编码。打开cmd，输入

shell 复制代码

chcp

即可以查看当前字符的编码，一般会显示为936 但是一般网页用的编码是UTF-8，对应的活动页代码编号是65001，在项目所在根目录执行命令

shell 复制代码

chcp 65001

然后运行就没有乱码了，由于每次都需要执行，所有我们修改一下启动命令

json 复制代码

"dev": "chcp 65001 && electron-vite dev",

引入文件问题

当我们在main文件夹中引入文件会ts报错，显示使用include模式，这个是因为ts没有配置相关路径，这个时候我们在ts的配置文件tsconfig.node.json的include中添加一下对应路径就行

json 复制代码

"include": ["electron.vite.config.*", "src/main/*", "src/preload/*","src/main/**/*.ts"],

同时也需要修改一下tsconfig.web.json文件，因为我们修改了renderer的文件结构，将includes修改为

javascript 复制代码

"include": [
    "src/renderer/src/env.d.ts",
    "src/renderer/**/*",
    "src/renderer/**/*.tsx",
    "src/renderer/*.d.ts",
    "src/renderer/**/**/*.ts"
  ],

同时path修改为

javascript 复制代码

"paths": {
  "@renderer/*": [
    "src/renderer/*"
  ]
}

刷新页面配置

虽然每次修改代码都会重新运行，不过有时候会运行不及时的问题，那么就需要我们自己手动刷新页面在main文件夹中的index.ts的createWindow函数中添加

typescript 复制代码

// 配置快捷键
globalShortcut.register('F5', () => {
  mainWindow.reload()
})

这样我们就可以使用f5刷新页面了