electron 項目構建, 打包實踐及避坑

項目架構是React + electron，能夠直接使用普通的 react 項目，而後加上electron配置。electron 配置能夠從項目https://github.com/electron/electron-quick-start.git 中獲取。

打包配置：

• 首先在 package.json中添加打包工具依賴

"devDependencies": {
    "electron-packager": "^14.2.1"
  }

• 再添加以下配置

"homepage": "."

• 在package.json中的scripts添加以下打包命令

"package": "electron-packager . demo --platform=darwin --arch=x64 --out=/Users/test/build --electron-version=8.2.3 --overwrite"

注意事項：

1. --platform 最好指定要打包的平臺，不建議指定 all

2. --out 不用指定爲 build，會出現打包以後沒有 build 目錄的問題，另外此處要使用絕對路徑

• 配置 main.js

好多博客中，貼出的加載應用的方式是，這樣的

// 加載應用的 index.html
  mainWindow.loadURL('file://' + __dirname + '/index.html')；

或者是使用了 path 拼接等等，均可能會找不到文件，或者報錯以下

electron Not allowed to load local resource

使用以下方式便可：

mainWindow.loadFile(`./build/index.html`)

另外，main.js 中若是有這個獨立的方法，

app.on('activate', function () {
    log.info("activate");
    // On macOS it's common to re-create a window in the app when the
    // dock icon is clicked and there are no other windows open.
    if (BrowserWindow.getAllWindows().length === 0) {
        createWindow();
    }
})

建議註釋掉，這個地方有個 bug，在應用啓動過程當中點擊會報錯，

Uncaught Exception:
Error: Cannot create BrowserWindow before app is ready
    at createWindow (/Users/test/Documents/wsWP/react-cn-mirrot/build/CN-Mirror-darwin-x64/CN-Mirror.app/Contents/Resources/app/main.js:11:24)
    at App.<anonymous> (/Users/test/Documents/wsWP/react-cn-mirrot/build/CN-Mirror-darwin-x64/CN-Mirror.app/Contents/Resources/app/main.js:98:9)
    at App.emit (events.js:210:5)

我已經跟 electron 提了 issue，回覆說會修復。

若是要使用這個方法，要放在app.whenReady()中。