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