前言
因工作需要,使用electron
开发一款桌面应用。
介于以下两点原因未使用electron-vue
类似的项目脚手架:
① 应用较小,复杂度低;
② 打包体积;
③ 巩固基础,直接写原生。
吐槽一下:对框架的依赖性导致现在大多数的开发者,基础能力都很差。
正文
对打包这块,一开始参照electorn
官网教程,使用的是Electorn Forge
来打包,但是就如官网所说,这个最快捷的打包方式,只是简单易用,可配置程度也较低,我去翻了官网文档,很多我期望的功能并没有提供配置选项,所以考虑放弃。紧接着尝试Electron Builder
打包, electorn
官网对此介绍如下:
Electron Builder
是一个完备的Electron应用打包和分发解决方案,它致力于软件开发的集成体验。
现在我想说的就是嗯,用过了,确实很好用!
直接放我的package.json
文件(注意json
文件里不能写注释,我下面只是辅助说明):
{
"name": "rabbit",
"version": "1.0.0",
"description": "rabbit",
"main": "main.js",
"scripts": {
"start": "electron .",
"win32": "electron-builder --win --ia32",
"win64": "electron-builder --win --x64",
"mac": "electron-builder --mac",
"linux": "electron-builder --linux"
},
"author": "rabbit",
"license": "MIT",
"devDependencies": {
"electron": "^13.1.7",
"electron-builder": "^22.11.7"
}
"build": {
"productName": "rabbit",
"appId": "com.rabbit.client",
"copyright": "© 伟大的兔神 2021",
"directories": {
"output": "dist"
},
"nsis": {
"oneClick": false,
"allowElevation": true,
"allowToChangeInstallationDirectory": true, // 允许用户自定义安装目录
"installerIcon": "icon.ico",
"uninstallerIcon": "icon.ico",
"installerHeaderIcon": "icon.ico",
"createDesktopShortcut": true,
"createStartMenuShortcut": true,
"shortcutName": "rabbit"
},
"win": {
"icon": "icon.ico",
"requestedExecutionLevel": "requireAdministrator", // 获取管理员权限
"target": [
{
"target": "nsis"
}
],
"extraFiles": { // 安装后会将源码 from 文件夹下的文件拷贝到 安装目录的 to 文件夹下
"from": "./from/",
"to": "to"
}
},
"dmg": {
"contents": [
{
"x": 410,
"y": 150,
"type": "link",
"path": "/Applications"
},
{
"x": 130,
"y": 150,
"type": "file"
}
]
},
"mac": {
"icon": "html/icon.ico"
},
"linux": {
"icon": "html/icon.ico"
}
}
}
一般的,配置好这个文件,打包都不会有什么问题。虽然这个配置使得我可以在64位
的机器上可以打出32位
的包,因为不懂打包原理,所以小心翼翼,我怕由于64位
机器因为与32位
机器环境及一些东西的不同导致最终打的包在投入生产后出现问题,或许你觉得没啥问题,但是看图说话:
很明显打包后的体积都不一样大,少了什么多了什么的,说不清。
所以我还是专门找了个32位
的机器去打包,如上图不幸的是这个32位
的机器是win7
系统,此时问题就出现了:
第一个问题:node环境安装
在NodeJS
官网下载了最新
的安装包,点击安装,弹窗直接说:win7
不支持安装。
那意思就是这个安装包太新了呗,win7
接受不了,得找个win7
支持的版本安装。
但是版本也不能太低,因为新版本总归会多一些东西。最终找到的支持的版本号位v12.22.4
,最终下载的是node-v12.22.4-x86.msi
这个安装包。
第二个问题:npm Error
安装好node
环境后,执行npm run win32
打包,直接报错npm Error
,控制台说:你的npm
版本可能存在一个问题。
那意思就是我的npm
版本不适合呗,执行npm -v
查看npm
的版本号。思考npm run win32
实际执行的是electron-builder --win --ia32
这条命令,那么很大部分原因就是electron-builder
这个依赖包的运行平台不匹配。我翻找node_modules
目录下的electron-builder
模块,如下图:
该模块指定了
"engines": { "node": ">=14.0.0" }
,即限定运行平台node
版本需大于等于v14.0.0
,而我安装的是v12.22.4
,所以不匹配导致打包失败。
第三个问题:再降NodeJS
的版本?
我没有选择再降NodeJS
的版本,反之来降electron-builder
的版本,我最终找到的是v22.11.1
。
以为万事大吉,终于可以成功打包了,但还是失败了,执行命令时又出现了下载问题。
第四个问题:下载问题
这块的问题我就直接搬运了,因为确实解决了我的问题,证实有用。
-
NPM
下载的问题因为
NPM
在国内比较慢。导致electron-V.xxxx.zip
下载失败。这些东西如果是第一次打包的话是需要下载对应electron
版本的支持文件。解决办法有两个- 设置镜像:在C盘User中找到
.npmrc
文件。然后加入下面这句代码,但是这个有时候也不是很好用
ELECTRON_MIRROR=http://npm.taobao.org/mirrors/electron/ 复制代码
- 直接去淘宝镜像文件库找到对应的文件并下载,放到指定的目录下,electron的淘宝镜像地址。下载完之后放到指定的文件。一般文件得地址在
C:\Users\Administrator\AppData\Local\electron\Cache
。例如我要下载1.8.4版本的electron
,那么找到镜像下得文件然后放到指定文件夹中。
(如果是在执行
npm install
时下载不下来)直接在淘宝镜像下载对应版本的zip,然后扔到C:\Users\YourUserName.electron就行这就解决了这个问题,简单又暴力。
- 设置镜像:在C盘User中找到
-
NSIS
下载问题如果你要打
NSIS
得包还需要再下载nsis-resources-xxx
等等包。经过上面得经验这下我们知道缺什么就填什么呗,通过错误日志我们可以得到我们要下载得版本,一般错误中通常会展示github
下载地址,直接点开连接去下载。但是位置这次不一样了。因为这是electron-builder
的支持环境所以我们要放在C:\Users\Administrator\AppData\Local\electron-builder\cache\nsis
下了。
一般情况下解决这些问题的思路就是,缺什么拿什么。
在解决了下载问题后,终于打包成功!!!
总结
本文看似只是针对打包的问题一个记录,但实际上讲的是一个解决问题的思路,遇到问题如何去查找验证,一步步解决,能力就是在一步步探索中提高的。