【Electron】Electron+React环境配置

前言

• 这玩意可以做些小工具什么的感觉挺实用，感觉学一下。

安装

• 首先是基本安装。
• 使用create-react-app创建项目。
• 然后安装electron

cnpm i electron -D

• 安装 electron-is-dev

cnpm i electron-is-dev -D

• 在根目录下编写mian.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':'xxxxx'//cra默认开的3000端口
    mainWindow.loadURL(urlLocation)
})

• 编写package.json，加入命令：

 "dev":"electron ."

• 同时配置electron入口：(也是package.json)

"main": "main.js",

• 然后直接npm start运行cra，待网页启动后，新开个cmd启动npm run dev。
• 一个react + electron的窗口就出现拉~~~

配置优化

• 由于同时起2个cmd不方便，加上react-dev-tool会自动开启网页，所以我们需要对这个配置进行优化，让其只要输入一个命令，自动完成上述过程。

• 安装cocurrently，可以并行运行2个命令。

cnpm i concurrently -D

• 安装wait-on ，这个工具可以等待某个命令完成后再继续下一个

cnpm i wait-on -D

• 安装cross-env ，解决不同机子上环境不同问题。

cnpm i cross-env -D

• 重新改写package.json的启动命令：

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

• 这就完美了。

额外一些一般要安装的

• devtron 可以控制台里新增一个调试栏，可以看见electron附加的一些ipc之类东西状态。

npm install electron-store -S

• 在代码中引入：

app.on('ready',()=>{
     
    require('devtron').install()
    mainWindow=new BrowserWindow({
     
        width:1024,
        height:680,
        webPreferences:{
     
            nodeIntegration:true
        }
    })
    const urlLocation =isDev? 'http://localhost:3000':'xxxxx'
    mainWindow.loadURL(urlLocation)
})

• electron-store 可以持久化数据。一般持久化数据就保存在这里。

npm install electron-store -S

• electron-builder 最后打包工具

npm install electron-builder -D