陈香锦新建Electron项目
新建项目使用Electron Forge进行创建，创建项目命令如下：
npm init electron-app@latest my-app此命令用于创建基础的Electron程序。Electron Forge拥有4个基础的模板，分别是webpack、webpack-typescript、vite、vite-typescript根据模板新建Electron的命令如下npm init electron-app@latest my-app -- --template=[template-name]，此处新建项目使用的模板为vite-typescript新建命令如下：npm init electron-app@latest my-new-app -- --template=vite-typescript。
此时目录列表应当如下所示：
my-app
node_modules // 模块目录
src // 代码目录
main.ts // Electron main.ts 主要配置文件，窗口从此处新建
preload.ts // Electron preload.ts Electron接口从此处暴露，可自定义接口函数
renderer.ts // Electron renderer.ts index.html主要引入的js文件（引入react从此入手）
types.d.ts // vite全局变量定义文件，放置ts对vite全局变量报错
.eslintrc.json // eslin配置文件
.gitignore
forge.config.ts // Electron Forge配置文件
index.html // 主要网页文件
package.json // 包文件 npm使用
package-lock.json
tsconfig.json // ts配置文件
vite.main.config.ts // vite electron main.ts 配置文件
vite.preload.config.ts // vite electron preload.ts 配置文件
vite.renderer.config.ts // vite electron renderer.ts 配置文件 index.html引入的主要js文件，
yarn.lock // 包文件 yarn使用重构文件框架
从上述文件目录可以看出Electron相关文件全部放置于src目录下，此目录一般用于存放前端文件，不便于管理。为方便管理，此处将所有Electron相关文件存放至my-app/main文件夹下。
受限将src文件夹重命名为main文件夹。此时vite相关的文件路径以及ts includes的文件路径均需改变。
修改forge.config.ts文件，原文件如下：
// import等
const config: ForgeConfig = {
// 其它属性
plugins: [
new VitePlugin({
// `build` can specify multiple entry builds, which can be Main process, Preload scripts, Worker process, etc.
// If you are familiar with Vite configuration, it will look really familiar.
build: [
{
// `entry` is just an alias for `build.lib.entry` in the corresponding file of `config`.
entry: 'src/main.ts',
config: 'vite.main.config.ts',
},
{
entry: 'src/preload.ts',
config: 'vite.preload.config.ts',
},
],
// 其它属性
}),
],
};
export default config;
修改其中的entry，修改后如下：
// import等
const config: ForgeConfig = {
// 其它属性
plugins: [
new VitePlugin({
// `build` can specify multiple entry builds, which can be Main process, Preload scripts, Worker process, etc.
// If you are familiar with Vite configuration, it will look really familiar.
build: [
{
// `entry` is just an alias for `build.lib.entry` in the corresponding file of `config`.
entry: 'main/main.ts',
config: 'vite.main.config.ts',
},
{
entry: 'main/preload.ts',
config: 'vite.preload.config.ts',
},
],
// 其它属性
}),
],
};
export default config;修改完成后还需将main文件夹包含在tsconfig.json中。原tsconfig.json中有："include": ["src"]需要修改为"include": ["src", “main”] 啊，只有main文件夹包含进行才能正确的识别types.d.ts文件，否则程序虽然可以运行，但会无法识别vite环境变量而报错。
安装React依赖
使用如下命令安装react依赖：
npm install --save react react-dom
npm install --save-dev @types/react @types/react-dom引入React程序
新建src文件夹，新建React index.tsx文件，作为React主程序入口。
my-app/src/index.tsx
import {createRoot} from 'react-dom/client';
import MainPage from "./MainPage";
const rootByID = document.getElementById('root');
const root = createRoot(rootByID as HTMLElement);
root.render(<MainPage/>);同时index.html文件需要发生变更(新建root节点)，变更后的文件为：
my-app/index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello World!</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/main/renderer.ts"></script>
</body>
</html>
可以看出，index.html引入了renderer.ts文件。所以此处需在renderer.ts中引入React程序入口，React程序即可生效。在my-app/main/renderer.ts文件中加入import '../src/index';用于引入React主程序入口。
修改tsconfig.json，引入"jsx": “react-jsx”。
此时我们的Electron + React + TypeScript + Vite程序就可以运行起来了，接下来就是细枝末节的问题了。
Vite引入React插件
安装Vite的插件包，命令如下：
npm i -S @vitejs/plugin-react配置Vite。此处应当配置vite.renderer.config.ts，具体配置如下：
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
export default defineConfig({
plugins: [react()],
});实现scss模块化
修改Vita配置文件如下：
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
// https://vitejs.dev/config/
export default defineConfig({
plugins: [react()],
css: {
modules: {
// 展示模块化处理之后的key的展示形式
localsConvention: 'camelCase',
// 配置当前的模块化行为是模块化还是全局化
// (有hash就是开启了模块化的一个标志, 因为他可以保证产生不同的hash值来控制我们的样式类名不被覆盖)
scopeBehaviour: 'local',
// 生成的类名的规则 (可以配置为函数, 也可以配置成字符串规则)
generateScopedName: '[name]__[local]___[hash:base64:5]'
}
}
});根目录新建typings.d.ts，内容如下：
declare module '*.scss';
declare module '*.css';将typings.d.ts包含在ts配置中。修改tsconfig.json，在include中包含typings.d.ts文件，修改后为："include": ["src", "main", "typings.d.ts"]。
END
tsconfig.json
{
"compilerOptions": {
"incremental": true,
"strict": true,
"target": "ESNext",
"module": "commonjs",
"allowJs": true,
"skipLibCheck": true,
"esModuleInterop": true,
"noImplicitAny": true,
"sourceMap": true,
"baseUrl": ".",
"lib": [
"dom",
"es2022"
],
"outDir": "dist",
"moduleResolution": "node",
"resolveJsonModule": true,
"jsx": "react-jsx"
},
"include": ["src", "main", "typings.d.ts"]
}