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. (/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()中。