手动创建Electron+React项目框架（建议直接看最后）
创建React项目
首先需要创建一个React项项目，这里就是用create-react-app快速创建了，如果你想使用其他的工具创建React项目也是没有问题的。
> mkdir pomelo # 先创建一个空的文件夹
> cd pomelo
> npx create-react-app . # 在当前目录下创建React应用
等待项目创建完成后，可以使用命令npm start测试项目创建是否成功。
如果没有问题的话，可以在浏览器中看到如下界面：
安装Electron包
这个步骤就非常常规了，在项目根目录下使用npm命令安装Electron包：
npm i electron --save-dev
话说，Electron的包是真的难安装，我经常失败，必要情况下需要使用梯子，同时配置代理端口。
创建Electron入口文件
安装完Electron之后，在项目根目录下创建一个文件夹，用于存放Electron代码。
这里我就将文件夹命名为src_electron，名字有点LOW，你可以自定义~~
然后在src_electron文件夹中创建两个文件：main.js、preload.js
在main.js中写入如下代码：
const {app, BrowserWindow} = require("electron");
const path = require("path");
const dotenv = require("dotenv");
dotenv.config();function createWindow() {const mainWindow = new BrowserWindow({width: 800,height: 600,webPreferences: {preload: path.join(__dirname, "preload.js"),contextIsolation: true,enableRemoteModule: false,},});console.log(process.env.NODE_ENV);// 加载 React 应用mainWindow.loadURL(process.env.NODE_ENV === "development"? "http://localhost:3000": `file://${path.join(__dirname, "../build/index.html")}`);// 打开开发者工具if (process.env.NODE_ENV === "development") {mainWindow.webContents.openDevTools();}
}app.whenReady().then(() => {createWindow();app.on("activate", () => {if (BrowserWindow.getAllWindows().length === 0) {createWindow();}});
});app.on("window-all-closed", () => {if (process.platform !== "darwin") {app.quit();}
});
注意：
在代码测试阶段，我们使用Electron加载URLlocalhost:3000，但是打包之后的正式环境，需要加载build/index.html文件。
配置环境变量
在项目根目录下创建.env文件，并在其中写入：
NODE_ENV=development
然后安装dotenv，使用指令：
npm i dotenv
配置package.json
在package.json文件中添加一条启动Electron的命令：
"scripts": {"start": "react-scripts start","build": "react-scripts build","test": "react-scripts test","eject": "react-scripts eject","electron": "electron ./src_electron/main.js" // 加上这一行},
尝试启动
首先启动React
npm start
等到React启动完成后，再启动Electron
npm run electron
如果配置正确的话，Electron窗口中就会显示React页面，大概就是下面的样子：
更加优雅的启动方式
使用两个命令分别启动React和Electron虽然可以用，但是确实不够优雅。
一个更加优雅的方式是使用concurrently实现一条指令同时启动React和Electron。
首先安装concurrently：
npm i concurrently --save-dev
然后编辑package.json，添加一条dev指令：
"scripts": {"start": "react-scripts start","build": "react-scripts build","test": "react-scripts test","eject": "react-scripts eject","electron": "electron ./src_electron/main.js","dev": "concurrently \"npm start\" \"npm run electron \"" # 注意这里},
这样，当我们使用命令：
npm run dev
就可以一次性完成项目启动。
当然这也有一些其他的问题，例如说：
Electron启动的比React快，会出现一定时间的页面白板。
解决的方法是使用wait-on顺序启动两个指令，但是我使用的时候一直不成功，这样凑合着也用的不错，就这样吧~~
更加优雅、正确的构建Electron+React+TS项目的方式
妈的，研究半天，还是使用 工具靠谱
npm create vite@latest my-electron-vite-project? Select a framework: › - Use arrow-keys. Return to submit.VanillaVueReactPreactLitSvelte
❯ Others? Select a variant: › - Use arrow-keys. Return to submit.create-vite-extra ↗
❯ create-electron-vite ↗# Choose your preferred front-end framework language
? Project template: › - Use arrow-keys. Return to submit.
❯ VueReactVanilla# Enter the project to download dependencies and run them
cd my-electron-vite-project
npm install
npm run dev