electron+react 开发桌面应用 学习之旅

1. 安装node坏境 版本10.0以上 为了用到一些小插件

安装cnpm 淘宝镜像

2.安装 electron

3.安装react  用全家桶创建项目

npx命令是局部用  不需要全局安装create-react-app

npx create-react-app project-name

4.在project-name文件夹下常见main.js

main.js 写入以下内容 （electron 运行的代码）

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' : 'xxx'

    mainWindow.loadURL(urlLocation)

})

5.修改package.json 文件

添加 "main" : "main.js"

添加  "scripts": {

     "dev": "electron ."

}

此时打开俩个终端控制台执行命令

第一个执行 npm start

第二个执行 npm run dev

现在浏览器会打开一个程序 桌面应用也会打开 ( 不是完美的解决方案)

以下是完美的解决方案

安装 cnpm install electron-is-dev --save-dev

安装 cnpm install concurrently --save-dev

安装 cnpm install cross-env --save-dev

安装 cnpm install wait-on --save-dev

修改package.json 文件

"scripts": {

"dev": "concurrently \"wait-on http://localhost:3000 && electron .\" \"cross-env BROWSER=none npm start\""

}