当前位置：首页 > news >正文

手动创建Electron+React项目框架（建议直接看最后）

news 来源：原创 2025/4/29 3:58:01

创建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.
    Vanilla
    Vue
    React
    Preact
    Lit
    Svelte
❯   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.
❯   Vue
    React
    Vanilla

# Enter the project to download dependencies and run them
cd my-electron-vite-project
npm install
npm run dev