React+Electron搭建桌面应用方法和步骤

React+Electron搭建桌面应用方法和步骤

步骤：

【一： 构建、配置入口】

1. 创建react 项目应用
2. 安装 Electron 依赖项
3. 修改 package.json 文件
4. 新建主线程文件 main.js 主线程文件
5. 运行项目

【二： 改造配置、环境域名】

1. 非必须：添加 合并启动执行命令 ，（有配置环境，不要用）
2. 非必须：安装 cross-env 环境变量，（根据环境请求不同域名和内容）

具体步骤如下：

【一： 构建、配置入口】

【1.1】创建react 项目应用

创建 react 应用：

// 安装react脚手架
npm install -g create-react-app

// 创建项目(projectname替换自己的项目名，不能有横杠大写，可以用下划线)
create-react-app projectname

// 打开目录
cd projectname

//启动测试是否正常
npm start

详见我另一个博客：
react+js或react+ts(tsx)使用creat-react-app、yarn搭建步骤

【1.2】react 项目内安装 Electron 依赖项

// 优先使用这个
npm i --save-dev electron

// 或者（node版本过低的不能用）：
npm install electron

【1.3】修改 package.json 文件

• 添加 定义执行命令，详见【1.5】
• 实际需要 删除package.json内的 所有注释。对象数组最后一个元素结尾不能有逗号

{
  "name": "my-electron",
  "version": "0.1.0",
  "private": true,
  "main": "main.js", // 配置启动文件 -- 需新建
  "homepage": ".", // 设置应用打包的根路径
  "dependencies": {
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "react": "^17.0.1",
    "react-dom": "^18.0.0",
    "react-scripts": "4.0.1",
    "web-vitals": "^0.2.4"
  },
  "scripts": {
    "start": "react-scripts start", // 【原始】react 启动命令，需要额外执行 electron。同时启动这两个
    "electron": "electron .", // 【添加】electron 启动命令，需要额外执行 start。同时启动这两个
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "dev": "react-scripts start | electron . --debug", // 【2.1介绍】合并命令，若有环境变量配置，不能使用
    "dev:debug": "react-scripts start | electron . --debug", // 【2.1介绍】合并命令，debug 模式。若有环境变量配置，不能使用
    "start:dev": "cross-env MODE_ENV=development react-scripts start", // 【2.2介绍】配置环境变量
    "electron:dev": "cross-env MODE_ENV=development electron ." // 【2.2介绍】配置环境变量
  },
  "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": {
    "electron": "^18.1.0"
  }
}

【1.4】新建 main.js 主线程文件

路径：与package.json 同层次

// 导入app、BrowserWindow模块
// app 控制应用程序的事件生命周期。事件调用app.on('eventName', callback)，方法调用app.functionName(arg)
// BrowserWindow 创建和控制浏览器窗口。new BrowserWindow([options]) 事件和方法调用同app
// Electron参考文档 https://www.electronjs.org/docs

const { app, BrowserWindow, nativeImage } = require('electron');
// const url = require('url');
// const path = require('path');

function createWindow () {
  let mainWindow = new BrowserWindow({
    width: 1000, // 窗口宽度
    height: 800, // 窗口高度
    title: "Electron", // 窗口标题,如果由loadURL()加载的HTML文件中含有标签