一、安装
1、安装操作系统相关依赖库,以Ubuntu为例:
sudo apt-get install icnsutils graphicsmagick xz-utils
2、通过npm进行electron-builder全局安装:
npm install electron-builder --global
二、配置文件
1、package.json中添加打包配置信息:
"build": {
"appId": "com.example.app",
"productName": "My App",
"directories": {
"output": "dist"
},
"linux": {
"target": "deb",
"icon": "build/icon.png"
},
"mac": {
"target": "dmg",
"icon": "build/icon.icns"
},
"win": {
"target": "nsis",
"icon": "build/icon.ico"
},
"publish": [{
"provider": "github",
"owner": "username",
"repo": "repository",
"private": true
}]
}
其中,appId为应用的标识符,productName为应用名称,directories.output为可执行文件的输出目录,linux/mas/win为对应平台的打包配置,publish为可选项,用于上传release文件。
2、创建build目录,并将对应平台的图标文件放在其中。
3、在package.json同级目录中创建electron-builder的配置文件:builder.json,添加配置信息。
{
"directories": {
"output": "dist"
},
"linux": {
"target": "deb",
"icon": "build/icon.png"
},
"mac": {
"target": "dmg",
"icon": "build/icon.icns"
},
"win": {
"target": "nsis",
"icon": "build/icon.ico"
},
"publish": [{
"provider": "github",
"owner": "username",
"repo": "repository",
"private": true
}]
}
注意,build目录中的图标文件路径与这里的相对路径要对应上。
三、打包命令
1、使用electron-builder默认配置进行打包:
electron-builder
2、指定打包配置文件:
electron-builder --config.builder.json
3、指定平台与打包类型:
electron-builder --mac -p always
其中,-p参数指定发布方式,always表示上传发布文件,never表示不上传,onTag表示在git tag时上传。
四、其他技巧
1、使用GitHub Actions自动化打包:
name: Build and Release
on:
push:
branches:
- master
jobs:
build-and-release:
name: Build and Release
runs-on: ubuntu-latest
steps:
- name: Checkout
uses: actions/checkout@v2
- name: Use Node.js 14.x
uses: actions/setup-node@v1
with:
node-version: 14.x
- name: Install Dependencies
run: npm install
- name: Build and Release
run: npm run build && electron-builder --publish always
2、配置文件可以继承:
{
"extends": "./builder.json",
"mac": {
"category": "public.app-category.developer-tools"
}
}
这样就只需要在新的配置文件中添加需要覆盖的部分了。
五、总结
通过以上步骤,我们就可以使用electron-builder将我们的应用打包成可发布的文件。在具体实践中,还需要注意不同平台的依赖和打包方式,以及加入自动化打包流程等。