electron-builder相比于electron-packager有更丰富的的功能,支持更多的平台,同时也支持了自动更新。除了这几点之外,由electron-builder打出的包更为轻量,并且可以打包出不暴露源码的setup安装程序。下面介绍一些electron-builder的使用方法:
首先安装对应的打包工具,全局安装使用起来更方便
npm intall electron-builder -g
在项目的package.json文件中配置 electron-builder相关参数:
{
"name": "test-electron",
"version": "1.0.0",
"description": "ceshi",
"main": "main.js",
"author": "",
"license": "ISC",
"electron": "^15.3.0",
"assar": true, //判断是否加密
"copyright:"Copyright@ 2021 huayu", //版权
"build": {
"appId": "com.test-electron.app", //应用的Id
"mac": {
"target": [ //包格式
"dmg",
"zip"
]
},
"win": {
"target": [
"nsis", //安装程序包的格式
"zip"
]
},
"nsis":{
"oneClick":false, //是否一键安装
"language":"2052",//安装语言(中文)
"perMachine":true, //给机器上所有用户安装
"allowToChangeInstallationDirectory":true//让用户选择安装目录
},
"squirrelWindows":{
"loadingGif":"resources/loading.gif", //配置安装loading动画
"iconUrl":"http://***.com/icon.ico" //icon的远端地址
}
},
"scripts": {
"dist": "electron-builder --win --x64",
"pack": "electron-builder --win --x64"
},
"devDependencies": {
"electron": "^15.3.0",
"electron-builder": "^22.13.1"
}
}
配置了对应的脚本之后执行打包命令
//npm 安装对应的包
npm install
//打包成对应的安装包
npm run dist
打包的时候可能会报一些错误,一般是由于网络问题导致的包下载失败
1.这是因为winCodeSign下载失败导致的错误
需要人手动下载对应的安装包放到对应的目录下
下载地址
<1>.github地址
Release winCodeSign-2.6.0 · electron-userland/electron-builder-binaries · GitHub
<2>.百度网盘
链接:https://pan.baidu.com/s/1_a0qQtIZvFrTsYxrYxMRHQ
提取码:4t96
下载完毕之后解压放到对应的目录下目录地址如下:
%LOCALAPPDATA%\electron-builder\Cache\winCodeSign\winCodeSign-2.6.0
2.这是因为electron-v15.3.0-win32下载失败引起的
下载地址1
https://github.com/electron/electron/releases/
下载地址2
链接:https://pan.baidu.com/s/1R1Vka9DhKq6MQRfr2wzVYA
提取码:pilf
下载之后将压缩包放到对应的目录下
macOS: ~/Library/Caches/electron
Linux: ~/.cache/electron
windows: %LOCALAPPDATA%\electron\cache
需要注意的是,除了这个压缩包以外,还要把对应的SHASUMS256.txt-文件也下载下来放进去txt文件需要按照截图格式命名才会生效,且里面只保留对应版本的编码。
3.上面的现象是因为缺少nsis-3.0.4.2引起的
下载地址
1.github地址
https://github.com/electron-userland/electron-builder-binaries/releases/tag/nsis-3.0.4.2
2.百度网盘
链接:https://pan.baidu.com/s/1eopB_uY5yVkP6XJ5qtVfiA
提取码:o1zk
下载完毕之后解压放到对应的目录下面目录地址为:
%LOCALAPPDATA%\electron-builder\Cache\nsis\nsis-3.0.4.2
4.上面的现象是nsis-resources-3.4.1文件下载失败引起的
下载地址
1.github地址
Release nsis-resources-3.4.1 · electron-userland/electron-builder-binaries · GitHub
2.百度网盘地址
链接:https://pan.baidu.com/s/1xcWKzh7g7w72US2TeDBwMg
提取码:5wx4
下载之后解压放到对应的目录下
%LOCALAPPDATA%\electron-builder\Cache\nsis\nsis-resources-3.4.1
完成上面的四个文件的手动下载部署之后使用electron-builder打包就可以了
npm run dist
对应的打包结果如下图所示,会生成对应的安装包可执行程序。