专业3合1网站建设电话免费查询公司

创建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