• npm create-react-app demo
    • cnpm i electron -D
    • 在根目录创建 main.js
    • cnpm i electron-is-dev -D // 判断开发环境还是生产环境 ```javascript 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‘:’’ // 使用url mainWindow.loadURL(urlLocation) })

    2. - package.json 配置
    4. ```javascript
    5. "main": "main.js"
    7. "dev": "electron ."
    • 一个命令打开 electron 和 react =》 cnpm i concurrently -D

    • 一个程序执行完 在执行下一个命令 cnpm i wait-on -D

      1. package.json 配置
      2. "dev": "concurrently \"electron .\" \"npm start\""
      3. "dev": "concurrently \"wait-on http://localhost:3000 && electron .\" \"npm start\""

    • 配置环境变量阻止 自动打开浏览器

    cnpm i cross-env -D

    1. "dev": "concurrently \"wait-on http://localhost:3000 && electron .\" \"cross-env BROWSER=none npm start\""
    • 修改scripts 中端口

    "start": "cross-env PORT=9000 react-scripts start",