react 结合 electron创建桌面应用

node 12.15.0

npx create-react-app cloud-doc

npm install electron --save-dev

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

根目录下新建一个 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' : ''
    mainWindow.loadURL(urlLocation)
})

package.json

"name": "cloud-doc",
"version": "0.1.0",
"main": "main.js",
"private": true,

配置package.json

npm install concurrently --save-dev

npm install wait-on --save-dev

npm install cross-env --save-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\""
  },

这样配置之后，启动 react 的同时，也会启动 electron，（concurrently 的作用），启动 electron 的时候，不会等待太久的白屏时间（ wait-on 的作用），同时在浏览器自动开启 react 的 tab 页 （cross-env 的作用）

这样的我们运行 npm run dev 的时候，就可以自动开启 electron 了。