electron打包

打包环境

• 系统银河麒麟sp1（其他linux皆可）
• 系统架构arm64
• 下载依赖

# 下载npm
sudo apt install npm
# 通过淘宝源下载cnpm
sudo npm install -g cnpm --registry=https://registry.npm.taobao.org

打包

• electron 官方提供相关的打包demo，可以通过 git clone https://github.com/electron-userland/electron-installer-debian.git 进行下载
• 配置环境

# cnpm 下载较为稳定
sudo cnpm install -g electron
sudo cnpm install -g electron-packager
sudo cnpm install -g electron-installer-debian

cd electron-installer-debian
cnpm install --save-dev electron
cnpm install --save-dev electron-packager
cnpm install --save-dev electron-installer-debian

• 可以通过 electron-packager 去构建deb包的目录节点

# app 程序名 --arch 系统架构  --out 输出目录
electron-packager . app --platform linux --arch arm64 --out dist/

• 使用electron-packager 构建目录过慢或遇到长时间无反应或TIMEOUT等问题时，可以添加--download.mirrorOptions.mirror=https://npm.taobao.org/mirrors/electron/对其进行加速

electron-packager . app --platform linux --arch arm64 --out dist/ --download.mirrorOptions.mirror=https://npm.taobao.org/mirrors/electron/

• 生成的dist/目录结构如下

└── dist
    └── app-linux-arm64
        ├── LICENSE
        ├── LICENSES.chromium.html
        ├── content_shell.pak
        ├── app
        ├── icudtl.dat
        ├── libgcrypt.so.11
        ├── libnode.so
        ├── locales
        ├── natives_blob.bin
        ├── resources
        ├── snapshot_blob.bin
        └── version

• 打deb包可以通过执行electron-installer-debian来实现

electron-installer-debian --src dist/app-linux-arm64/ --dest dist/installers/ --arch arm64

• 完成以上操作后你会dist/installers/app_0.0.1_arm64.deb目录得到deb包

通过package.json脚本进行打包相关操作

• 如果你想通过npm来执行electron相关操作，可以通过修改package.json文件来实现，用例如下

{
  "name": "app",
  "description": "An awesome app!",
  "version": "0.0.1",
  "scripts": {
    "start": "electron .",
    "build": "electron-packager . app --platform linux --arch arm64 --out dist/ --download.mirrorOptions.mirror=https://npm.taobao.org/mirrors/electron/",
    "pack:kylin": "electron-installer-debian --src dist/app-linux-arm64/ --dest dist/installers/ --arch arm64"
  },
  "devDependencies": {
    "electron-installer-debian": "^0.6.0",
    "electron-packager": "^9.0.0",
    "electron": "~1.7.0"
  }
}

• 此时执行npm run build 与 执行electron-packager . app --platform linux --arch arm64 --out dist/ --download.mirrorOptions.mirror=https://npm.taobao.org/mirrors/electron/效果是一样的

asar加密相关

• asar并非是一种加密方式，是一种压缩包的方法，可以通过asar extract xxx.asar 进行解缩
• asar 是一种将多个文件合并成一个文件的类 tar 风格的归档格式。 Electron 可以无需解压整个文件，即可从其中读取任意文件内容
• 参照如下步骤将你的应用打包成 asar归档文件

1. 安装 asar 实用程序
npm install -g asar
2. 使用 asar pack 打包
asar pack your-app app.asar

• 使用asar文件，在Electron中有两类API,一种是由Node.js提供的Node API和Chromium提供的Web API。这两种API都支持从asar中读取文件。

asar依赖第三方库执行报错

• 当你使用asar打包时，调用了第三方的so库，并且该库也在asar内，会有以下报错。

Error: libhello.so: cannot open shared object file: No such file or directory
    at process.func [as dlopen] (node:electron/js2c/asar_bundle:5:1800)
    at Object.Module._extensions..node (node:internal/modules/cjs/loader:1170:18)
    at Object.func [as .node] (node:electron/js2c/asar_bundle:5:2027)
    at Module.load (node:internal/modules/cjs/loader:982:32)
    at Module._load (node:internal/modules/cjs/loader:823:12)
    at Function.c._load (node:electron/js2c/asar_bundle:5:13331)
    at Module.require (node:internal/modules/cjs/loader:1006:19)
    at require (node:internal/modules/cjs/helpers:93:18)
    at new Log (/usr/lib/helloworld/resources/app.asar/packages/main/dist/index.js:1:301)
    at /usr/lib/helloworld/resources/app.asar/packages/main/dist/index.js:1:1228606 {
  code: 'ERR_DLOPEN_FAILED'
}
A JavaScript error occurred in the main process
Uncaught Exception:
TypeError: t is not a constructor
    at new Log (/usr/lib/helloworld/resources/app.asar/packages/main/dist/index.js:1:354)
    at /usr/lib/helloworld/resources/app.asar/packages/main/dist/index.js:1:1228606
    at /usr/lib/helloworld/resources/app.asar/packages/main/dist/index.js:1:1247263
    at Object.<anonymous> (/usr/lib/helloworld/resources/app.asar/packages/main/dist/index.js:1:1247267)
    at Module._compile (node:internal/modules/cjs/loader:1110:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1140:10)
    at Module.load (node:internal/modules/cjs/loader:982:32)
    at Module._load (node:internal/modules/cjs/loader:823:12)
    at Function.c._load (node:electron/js2c/asar_bundle:5:13331)
    at Object.<anonymous> (node:electron/js2c/browser_init:197:3197)

• 该报错是因为asar生成asar归档文件后，其内部的so文件会识别成只读模式，无法加载与调用，解决该问题有两种方案

方案一

• 在asar生成归档文件时使用--unpack参数，可以将指定文件夹的文件不归压缩在asar文件内，此时调用该so库不会存在此问题，命令如下

cd dist/app-linux-arm64/resources/
asar pack app app.asar asar pack app app.asar --unpack *.md

• 运行命令后，您将会看到 app.asar.unpacked 文件夹与 app.asar 文件一起被创建了。 没有被打包的文件和 app.asar 会一起存档发布。
• 随后运行程序时不会存在报错

方案二

• 将so动态库修改为静态库，或者改为.node形式的第三方库，该代码可以参考https://github.com/belloyang/test_addon.git代码,具体操作如下

git clone https://github.com/belloyang/test_addon.git
cd test_addon && cnpm install 

• 打包可自行联系，该demo会生成.node的动态库，可以被正常执行。