electron+react环境搭建，在react项目中使用electron构建桌面应用

1.使用create-react-app创建react项目

npx create-react-app my-react-app
cd my-react-app

2.配置npm和electron国内镜像

在项目根目录下新建一个.npmrc文件，添加如下内容：

registry=https://registry.npmmirror.com/
disturl=https://registry.npmmirror.com/-/binary/node
electron_mirror=https://npmmirror.com/mirrors/electron/
electron-builder-binaries_mirror=https://registry.npmmirror.com/-/binary/electron-builder-binaries/

3.在react项目中安装Electron

npm install electron --save-dev

4.安装electron-builder
electron-builder用于打包electron应用

npm install electron-builder --save-dev

5.创建 Electron 入口文件
在项目的public目录下创建一个名为 electron.js 的文件，这是 Electron 的入口文件。这个文件将负责启动 Electron 应用并加载你的 React 应用。

// public/electron.js
const { app, BrowserWindow } = require('electron');
const path = require('node:path');
const url = require('node:url');

const createWindow = () => {
  // 创建窗口
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600
  })

  // 加载 React 应用
  const startUrl = process.env.ELECTRON_START_URL || url.format({
    pathname: path.join(__dirname, '/index.html'),
    protocol: 'file:',
    slashes: true,
  });
  mainWindow.loadURL(startUrl);

  // 打开开发工具
  // mainWindow.webContents.openDevTools();
}

// 这段程序将会在 Electron 结束初始化
// 和创建浏览器窗口的时候调用
// 部分 API 在 ready 事件触发后才能使用。
app.whenReady().then(() => {
  createWindow()

  app.on('activate', () => {
    // 在 macOS 系统内, 如果没有已开启的应用窗口
    // 点击托盘图标时通常会重新创建一个新窗口
    if (BrowserWindow.getAllWindows().length === 0) createWindow()
  })
})

// 除了 macOS 外，当所有窗口都被关闭的时候退出程序。 因此, 通常
// 对应用程序和它们的菜单栏来说应该时刻保持激活状态,
// 直到用户使用 Cmd + Q 明确退出
app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') app.quit()
})

6.安装cross-env
cross-env是一个跨平台设置环境变量的工具，可以确保在不同操作系统上都能正常工作。

npm install cross-env --save-dev

7.修改package.json
你需要在 package.json 中添加一些配置，以便 Electron 能够正确启动你的应用。

{
  "name": "your-app-name",
  "version": "0.1.0",
  "private": true,
  "main": "public/electron.js",  // 添加这一行，指定 Electron 的入口文件
  "homepage": "./",  // 添加这一行，确保 React 应用的相对路径正确
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "electron-start": "ELECTRON_START_URL=http://localhost:3000 electron .",  // 添加这一行，用于启动electron
    "electron-pack": "electron-builder"  // 添加这一行，用于打包 Electron 应用
  },
  "dependencies": {
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-scripts": "4.0.3"
  },
  "devDependencies": {
    "electron": "^13.1.7",
    "electron-builder": "^22.11.7"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

8.运行electron应用

先运行react应用

npm run start

然后在另一个终端窗口中运行electron应用，electron会加载react应用

npm run electron-start

这样就成功在react项目中运行electron了

9.react与electron通信

在项目的public目录下创建一个preload.js文件，preload.js 文件用于在渲染进程（即你的 React 应用）和主进程之间建立桥梁。preload.js 脚本在渲染进程加载之前运行，因此它可以安全地暴露 Node.js 和 Electron API 给渲染进程，同时保持上下文隔离。

// public/preload.js
const { contextBridge, ipcRenderer } = require('electron');

// 暴露 API 给渲染进程
contextBridge.exposeInMainWorld('electronAPI', {
  sendMessage: (message) => ipcRenderer.send('message', message),
  onMessage: (callback) => ipcRenderer.on('message', callback),
});

修改electron.js以加载preload.js，引入ipcMain模块用于监听渲染进程发送的消息。

// public/electron.js
const { app, BrowserWindow, ipcMain } = require('electron');//引入ipcMain模块
const path = require('node:path');
const url = require('node:url');

const createWindow = () => {
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js') //指定 preload.js 文件
    }
  })

  const startUrl = process.env.ELECTRON_START_URL || url.format({
    pathname: path.join(__dirname, '/index.html'),
    protocol: 'file:',
    slashes: true,
  });
  mainWindow.loadURL(startUrl);

}

app.whenReady().then(() => {
  createWindow()

  app.on('activate', () => {
    if (BrowserWindow.getAllWindows().length === 0) createWindow()
  })
})

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') app.quit()
})


// 监听渲染进程发送的消息
ipcMain.on('message', (event, message) => {
  console.log('Message from renderer:', message);
  // 你可以在这里处理消息并发送回渲染进程
  event.reply('message', 'Message received by main process');
});

在 React 应用中，你可以通过 window.electronAPI 访问 preload.js 中暴露的 API。

// src/App.js
import { useEffect } from 'react';

function App() {
  useEffect(() => {
    // 监听主进程发送的消息
    window.electronAPI.onMessage((event, message) => {
      console.log('Message from main:', message);
    });

    // 发送消息到主进程
    window.electronAPI.sendMessage('Hello from renderer');
  }, []);

  return (
    <div className="App">
      <h1>Hello, Electron with React!</h1>
    </div>
  );
}

export default App;

10.打包

运行以下命令来打包你的应用

先打包react

npm run build

再打包electron

npm run electron-pack

11.自定义打包配置

如果想自定义软件名称、图标、包名、版权等信息，可以在package.json中添加build相关配置，另外再准备一个ico图标放到public目录下，将ico图标命名为icon.ico，这个图标就是软件的图标。

"build": {
    "appId": "com.example.yourapp",
    "productName": "YourAppName",
    "copyright":"版权",
    "directories": {
      "output": "dist"
    },
    "files": [
      "build/**/*",
      "node_modules/",
      "package.json"
    ],
    "nsis": {
      "oneClick": false,
      "allowElevation": true,
      "allowToChangeInstallationDirectory": true,
      "installerIcon": "./public/icon.ico",
      "uninstallerIcon": "./public/icon.ico",
      "installerHeaderIcon": "./public/icon.ico",
      "createDesktopShortcut": true,
      "createStartMenuShortcut": true,
      "shortcutName": "快捷方式名称"
    },
    "dmg": {
      "contents": [
        {
          "x": 410,
          "y": 150,
          "type": "link",
          "path": "/Applications"
        },
        {
          "x": 130,
          "y": 150,
          "type": "file"
        }
      ]
    },
    "mac": {
      "icon": "./public/icon.icns"
    },
    "win": {
      "icon": "./public/icon.ico",
      "target": [
        {
          "target": "nsis",
          "arch": [
            "x64",
            "ia32"
          ]
        }
      ]
    },
    "linux": {
      "icon": "./public/icon.png"
    }
  }

下面是我完整的package.json文件，您可以参考一下

{
  "name": "test2",
  "version": "0.1.0",
  "private": true,
  "main": "public/electron.js",
  "homepage": "./",
  "author": "作者名称",
  "license": "ISC",
  "description": "软件描述",
  "dependencies": {
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "electron-start": "cross-env ELECTRON_START_URL=http://localhost:3000 electron .",
    "electron-pack": "electron-builder",
    "electron-pack-dir": "electron-builder --dir"
  },
  "build": {
    "appId": "com.example.yourapp",
    "productName": "YourAppName",
    "copyright":"版权",
    "directories": {
      "output": "dist"
    },
    "files": [
      "build/**/*",
      "node_modules/",
      "package.json"
    ],
    "nsis": {
      "oneClick": false,
      "allowElevation": true,
      "allowToChangeInstallationDirectory": true,
      "installerIcon": "./public/icon.ico",
      "uninstallerIcon": "./public/icon.ico",
      "installerHeaderIcon": "./public/icon.ico",
      "createDesktopShortcut": true,
      "createStartMenuShortcut": true,
      "shortcutName": "快捷方式名称"
    },
    "dmg": {
      "contents": [
        {
          "x": 410,
          "y": 150,
          "type": "link",
          "path": "/Applications"
        },
        {
          "x": 130,
          "y": 150,
          "type": "file"
        }
      ]
    },
    "mac": {
      "icon": "./public/icon.icns"
    },
    "win": {
      "icon": "./public/icon.ico",
      "target": [
        {
          "target": "nsis",
          "arch": [
            "x64",
            "ia32"
          ]
        }
      ]
    },
    "linux": {
      "icon": "./public/icon.png"
    }
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "cross-env": "^7.0.3",
    "electron": "^33.2.0",
    "electron-builder": "^25.1.8"
  }
}

以上就是在react项目中使用electron构建桌面应用的教程。

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: