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 了。