electron 项目构建, 打包实践及避坑

项目架构是React + electron,能够直接使用普通的 react 项目,而后加上electron配置。electron 配置能够从项目https://github.com/electron/electron-quick-start.git 中获取。html

打包配置:react

  • 首先在 package.json中添加打包工具依赖
"devDependencies": {
    "electron-packager": "^14.2.1"
  }
  • 再添加以下配置

"homepage": "."git

  • 在package.json中的scripts添加以下打包命令
"package": "electron-packager . demo --platform=darwin --arch=x64 --out=/Users/test/build --electron-version=8.2.3 --overwrite"

注意事项:github

  1. --platform 最好指定要打包的平台,不建议指定 allshell

  2. --out 不用指定为 build,会出现打包以后没有 build 目录的问题,另外此处要使用绝对路径json

  • 配置 main.js

好多博客中,贴出的加载应用的方式是,这样的windows

// 加载应用的 index.html
  mainWindow.loadURL('file://' + __dirname + '/index.html');

或者是使用了 path 拼接等等,均可能会找不到文件,或者报错以下架构

electron Not allowed to load local resource

使用以下方式便可:app

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

另外,main.js 中若是有这个独立的方法,electron

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

本站公众号
   欢迎关注本站公众号,获取更多信息