React+Electron搭建开发环境

前言：

刚进入公司接触Electron项目，看到代码的时候发现它和React的项目结构极其的相似。此前，我的leader让我学习electron，但我学习的方式只能通过B站上少有的学习视频以及官方文档，没有使用到Vue以及React框架，后面意识到自己先前学习的只是皮毛，完全没有达到工程项目的要求。为了熟悉项目的工程结构，于是乎，自己开始搭建开发环境，并模拟网易云实现音乐播放器，加快对项目的理解。
非常感谢CSDN上几篇博客给我的灵感。

现在，开始搭建我自己的项目。

步骤

确保你的电脑上已经有node环境

一、创建React项目

npm i create-react-app
1

npm create-react-app my-app
1

cd my-app
1

二、在my-app项目中安装electron

npm config set registry https://registry.npm.taobao.org
1

cnpm install electron --save-dev
1

cnpm install electron-is-dev --save-dev
1

三、在pulic文件夹下新建main.js文件

main.js

const { app ,BrowserWindow } = require('electron')
const isDev = require('electron-is-dev')
let mainWindow;

app.on('ready', () => {
    mainWindow = new BrowserWindow({
        width: 1024,
        height: 680,
        webPreferences:{
            nodeIntegration: true,
        }
    })
    const urlLocation = isDev ? 'http://localhost:3000' : 'dummyurl'
    mainWindow.loadURL(urlLocation);
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

四、安装concurrently、wait-on、cross-env

同时执行多个命令

cnpm install concurrently --save-dev
1

等待资源加载完成

cnpm install wait-on --save-dev
1

环境变量

cnpm install cross-env --save-dev
1

五、修改package.json

main对应的值是你定义的main.js文件所在的位置

"main":"./public/main.js"
1

electron原本对应的值是electron .，但想要看到效果，我们必须先npm start开启react项目，再开启另一个终端npm run electron启动electron项目，这样太麻烦了。
所以我们设置修改后的electron对应的值，是为了不用执行npm start就可以使用npm run electron直接启动electron项目看到效果。

"script":{
 		"electron-dev": "electron . dev",
    	"electron": "concurrently \" wait-on http://localhost:3000 && electron . \" \" cross-env BROWSER=none npm start \" "
     }
1
2
3
4

完整package.json

{
  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "main": "./public/main.js",
  "homepage": ".",
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.3.0",
    "@testing-library/user-event": "^13.5.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "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-dev": "electron . dev",
    "electron": "concurrently \" wait-on http://localhost:3000 && electron . \" \" cross-env BROWSER=none npm start \" "

  },
  "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": {
    "concurrently": "^7.3.0",
    "cross-env": "^7.0.3",
    "electron": "^20.0.1",
    "electron-is-dev": "^2.0.0",
    "wait-on": "^6.0.1"
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51

六、运行electron项目

npm run electron
1

如此，大功告成！！！！