Electron和React配合使用

先创建react项目

npx create-react-app@latest markdown-doc

再安装Electron

npm install --save-dev electron@latest

再安装一个库，用来判断是是开发环境还是生产环境

npm install electron-is-dev --save-dev

markdown-doc项目根目录中创建一个main.js文件， 并编写以下代码

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


let mainWindow = null;


app.on('ready', () => {
    mainWindow = new BrowserWindow({
        width: 1024,
        height: 680,
        webPreferences: {
            nodeIntegration: true,
        }
    })
    // 连接react项目链接
    const loadURL = isDev ? 'http://localhost:3000' : '暂时还不定义'
    mainWindow.loadURL(loadURL)
})

修改package.json文件（增加一个main,和一个 dev命令）

{
  "name": "markdown-doc",
  "version": "0.1.0",
  "private": true,
  "main": "main.js",
  "dependencies": {
    "@testing-library/dom": "^10.4.0",
    "@testing-library/jest-dom": "^6.6.3",
    "@testing-library/react": "^16.3.0",
    "@testing-library/user-event": "^13.5.0",
    "react": "^19.1.0",
    "react-dom": "^19.1.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",
    "dev": "electron ."
  },
  // ....

}

然后终端启动前端项目、再启动Electron 就可以了

yarn start 
yarn dev

再修改一下，我们现在要先启动好前端项目，再启动Electron，比较繁琐

安装一个库

 npm install concurrently --save

再次修改package.json的dev命令

  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "dev": "concurrently \"electron .\" \"npm start \" "
  },

然后就用一个命令就可以了,但是启动有一会的白屏，还要等一会刷新程序才行。。。

为了解决这个问题，我们再安装一个库

npm install wait-on --save-dev

再次修改package.json的dev命令

  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "dev": "concurrently \"wait-on http://localhost:3000 && electron .\" \"npm start\" "
  },

用wait-on这个库的意思大概就是说，等我们的前端项目localhost:3000启动完成后，再打开electron，这样就不会有白屏的现象了

到这里就差不多了，但是发现每次启动还是会启动一个浏览器标签页，我们也把这个关掉了

再安装一个库

npm install cross-env --save-dev

再次修改package.json的dev命令

  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "dev": "concurrently \"wait-on http://localhost:3000 && electron .\" \"cross-env BROWSER=none npm start\" "
  },

其他项目不重要的配置

   使用sass

    https://create-react-app.dev/docs/adding-a-sass-stylesheet/

yarn add sass