不联网的情况下,使用 electron-builder 快速打包全平台应用

前言 【不联网的情况下,使用 electron-builder 快速打包全平台应用】Electron 之所以能够日益风靡,是因为其简单易用且对各个操作平台具有良好的支持。
今天我就来分享一下怎么使用一套代码,快速打包生成各主流平台安装包的经验。
项目安装 首先,使用我前面介绍的提效小技巧,设置:

  • NPM 源为淘宝镜像源;
  • Electron 源为中国镜像网站中的 Electron 源地址。
然后依次执行以下指令:
mkdir my-electron cd my-electron npm init -y npm install electron@14.2.6 -D npm install @electron/remote --save npm install electron-builder -D

打包配置 在 my-electron 目录下的 package.json 中,添加打包配置:
{ "name": "my-electron", "version": "0.1.0", "author": "编程三昧", "build": {// electron-builder配置 "productName":"myFirstApp",//项目名 这也是生成的exe文件的前缀名 "appId": "xxxxx", "copyright":"xxxx",//版权信息 "directories": { "output": "build" // 输出文件夹 }, "extraResources":[{ // 需要读写的配置文件 "from": "./config/config.json", "to": "../config/config.json" }], "win": { "icon": "xxx/icon.ico"//图标路径, "target":[ { "target": "nsis", "arch": ["x64"] } ] }, "dmg": { "contents": [ { "x": 0, "y": 0, "path": "/Application" } ] }, "linux": { "icon": "xxx/icon.ico" }, "mac": { "icon": "xxx/icon.ico" }, "nsis": { "oneClick": false, // 一键安装 "guid": "xxxx", //注册表名字,不推荐修改 "perMachine": true, // 是否开启安装时权限限制(此电脑或当前用户) "allowElevation": true, // 允许请求提升。 如果为false,则用户必须使用提升的权限重新启动安装程序。 "allowToChangeInstallationDirectory": true, // 允许修改安装目录 "installerIcon": "./build/icons/aaa.ico", // 安装图标 "uninstallerIcon": "./build/icons/bbb.ico", //卸载图标 "installerHeaderIcon": "./build/icons/aaa.ico", // 安装时头部图标 "createDesktopShortcut": true, // 创建桌面图标 "createStartMenuShortcut": true, // 创建开始菜单图标 "shortcutName": "xxxx" // 图标名称 } } }

配置打包脚本 在 package.json 中,添加对应的打包脚本:
{ … "scripts": { "dev": "electron . --enable-loggin --no-sandbox", "build-64": "electron-builder --win --x64", "build-linux": "electron-builder --linux", "build-mac": "electron-builder --mac" } … }

在 my-electron 目录下打开终端,运行 npm run dev 即可进入开发模式。
关于各平台 Electron 镜像 在有网络的情况下,由于我们设置了 NPM 镜像和 Electron 源,速度还是很快的。
但我这边是内网打包,没法联网,所以,需要取个巧,在打包开始之前就将对应平台的 Electron 源下载下来放到各自的 NPM 缓存中去。
electron-builder 在打包的时候,会根据系统的不同去各自的 NPM 缓存目录下查找对应版本的 Electron 源,当我们将下载好的源放在 NPM 缓存中后,就不需要再去联网拉去了。
我使用的 electron@14.2.6 镜像的下载地址为:https://registry.npmmirror.com/binary.html?path=electron/14.2.6/
这是 @electron/get 中获取 electron 镜像缓存的示例:
import { downloadArtifact } from '@electron/get'; const zipFilePath = await downloadArtifact({ version: '14.2.6', platform: 'darwin', artifactName: 'electron', artifactSuffix: 'symbols', arch: 'x64', });

各操作系统对应的 NPM 缓存路径分别为:
  • Linux: $XDG_CACHE_HOME or ~/.cache/electron/
  • MacOS: ~/Library/Caches/electron/
  • Windows: %LOCALAPPDATA%/electron/Cache or ~/AppData/Local/electron/Cache/
注意:Linux x64Linux arm64 对应的 electron 镜像是不同的,
关于开发模式启动不了的问题 开发模式可能启动不了,其原因或许是 my-electron、node_modules 下的 electron 未执行安装,缺少 Electron 源。
想要解决,只需执行以下指令:
node ./node_modules/electron/cli.js

等待 electron 镜像拉取完成后,即可正常进入开始模式。
总结 以上就是在不联网的情况下使用 electron-builder 打包全平台桌面应用的记录。
~
~ 本文完,感谢阅读!
~
学习有趣的知识,结识有趣的朋友,塑造有趣的灵魂!
大家好,我是〖编程三昧〗的作者 隐逸王,我的公众号是『编程三昧』,欢迎关注,希望大家多多指教!

    推荐阅读