electron+react开发属于自己的桌面应用

本片文章将从0到1简单介绍，electron项目的初始化，开发配置，打包配置

项目初始化&开发配置

1.创建一个react的项目（可以使用官方的create-react-app的脚手架创建）

2.安装electron(注意一定是devDependencies，否则后面打包会报错)

npm i electron -D

3.写一个electron的启动文件（main.js）

const { app, BrowserWindow } = require('electron')
const path = require('path')
const url = require('url')

const ENV = process.env.NODE_ENV;

function createWindow () {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  })
  if(ENV=='development') {  //区分开发和生产环境
    win.loadURL('http://localhost:3000/')
  }
  else {
    // 加载应用----react 打包
    win.loadURL(url.format({
      pathname: path.join(__dirname, './build/index.html'),
      protocol: 'file:',
      slashes: true
    }))
  }
  win.webContents.openDevTools()
}

app.whenReady().then(createWindow)

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

app.on('activate', () => {
  if (BrowserWindow.getAllWindows().length === 0) {
    createWindow()
  }
})　

4.配置package.json

{
    "main": "main.js",//指定入口的文件
    "scripts"：{ //配置启动脚本
          "electron-start": "electron .", //生产环境
          "electron-start:dev": "cross-env NODE_ENV=development electron ." //开发环境，这样改动代码会热更新
     }
}

5.同时启动我们的客户端和服务端进行开发即可

//开发环境
npm start
npm run  electron-start:dev

//生产环境
npm run build
npm run electron-start

**注意**：生产环境启动会出现文件找不到的情况，是因为我们的资源在html是根路径的方式插入的（/static/js/main.629b1443.chunk.js），所以需要配置成相对路径(./static/js/main.629b1443.chunk.js),在package.json中添加homepage配置项

{
    "homepage": ".",
}

项目打包

electron-builder

1.安装(指定版本，否则打包会出错，也安装到devDependencies）

npm i electron-builder@21.2.0 -D

2.package.json配置build

"build": {
    "appId": "xxx.wss.app",  //随便填
    "directories": {
      "output": "dist"  //打包之后输出的目录
    },
    "win": {  //windows配置
      "target": [
        "nsis",
        "zip"
      ],
      "icon": "icon.ico"
    },
    "files": [  //打包包含的文件
      "build/**/*",  //react代码打包的output
      "main.js"  //electron的入口js
    ],
    "extends": null   //不写的话会报错
  }

3.配置执行脚本

{
  “scripts”： {
     "pack": "electron-builder"
  }
}    

4.执行打包命令

npm run pack

5.直接打开打包后的.exe文件即可

 

 参考文献：

https://www.electronjs.org/docs

https://juejin.im/post/6844903555921362952

https://www.jianshu.com/p/15bde714e198