# Electron打包
常见的打包方案:
- electron-packager
- electron-builder(推荐)
- Electron-forge
常见问题:
- windows平台能打包MacOS的包吗?不能,不能跨架构。可以使用CI/CD工具进行跨平台打包。
dmg
是mac平台安装镜像,pkg
是系统安装包,如插件。
# 演示
在推荐的模板项目:https://github.com/cawa-93/vite-electron-builder (opens new window)中就提供了compile
命令:
"compile": "electron-builder build --config electron-builder.config.js --config.asar=false",
但是,官方文档中也说明的非常清楚:
Using the npm script
compile
: This script is configured to compile the application as quickly as possible. It is not ready for distribution, it is compiled only for the current platform and is used for debugging.
这个命令只是用于打包测试,并不是真正的打包分发。
最终形态,通过CICD的工具来打包多平台应用。
Using GitHub Actions: The application is compiled for any platform and ready-to-distribute files are automatically added as a draft to the GitHub releases page.
# 准备
# 作者信息
修改package.json
文件,需要添加两个属性:
{
// ...
"author": {
"name": "brian",
"email": "brian@toimc.com"
},
"description": "A Community Project use the Electron!",
// ...
}
配置node的版本为16,因为最新的electron 16需要node>=16的环境。
可以使用nvm进行安装:
然后就可以测试compile
命令了!打包结果:
说明:MacOS上的小伙伴打包会失败,没有关系,后续还需要配置证书。
# 图标与安装图片
- MacOS -> icon.icns(不小于512像素)
- Windows -> icon.ico(不小于256像素)
- asar属性:简单打包属性,添加源码至应用包(增量更新的时候,可以使用asar)
mac平台上图标生成的方式:
创建一个createicns.sh
文件:
#!/bin/bash
input_filepath="logo1024x1024.png"
output_iconset_name="icon.iconset"
mkdir $output_iconset_name
sips -z 16 16 $input_filepath --out "${output_iconset_name}/icon_16x16.png"
sips -z 32 32 $input_filepath --out "${output_iconset_name}/icon_16x16@2x.png"
sips -z 32 32 $input_filepath --out "${output_iconset_name}/icon_32x32.png"
sips -z 64 64 $input_filepath --out "${output_iconset_name}/icon_32x32@2x.png"
sips -z 128 128 $input_filepath --out "${output_iconset_name}/icon_128x128.png"
sips -z 256 256 $input_filepath --out "${output_iconset_name}/icon_128x128@2x.png"
sips -z 256 256 $input_filepath --out "${output_iconset_name}/icon_256x256.png"
sips -z 512 512 $input_filepath --out "${output_iconset_name}/icon_256x256@2x.png"
sips -z 512 512 $input_filepath --out "${output_iconset_name}/icon_512x512.png"
sips -z 1024 1024 $input_filepath --out "${output_iconset_name}/icon_512x512@2x.png"
iconutil -c icns $output_iconset_name
rm -R $output_iconset_name
设置执行命令
chmod +x ./craeteicns.sh
然后,放置到同级的logo1024x1024.png
目录中,打开命令行,执行脚本,即可以得到icns的图标文件了。
windows平台上,可以借助到在线平台上的工具:ICO converter,https://www.icoconverter.com/ (opens new window)
安装图片的设置(mac)
同样的,放置到buildResources
目录即可。
打包配置(mac)
修改electron-builder.config.js
文件:
dmg: {
background: 'buildResources/background.tiff'
},
打包命令(mac)
"compile:pack": "electron-builder build --config electron-builder.config.js --config.asar=false",
# 应用名称
修改electron-builder.config.js
文件:
productName: 'toimc技术社区HD',
# 构建打包&测试
步骤:
配置名称描述
添加appId,注意不要有下横线。
配置平台
参考这个部分:https://www.electron.build/configuration/configuration#configuration (opens new window)
添加图标 启动图片
配置脚本
打包
electron-builder配置electron-builder.config.js
文件:
const path = require('path')
if (process.env.VITE_APP_VERSION === undefined) {
const now = new Date()
process.env.VITE_APP_VERSION = `${now.getUTCFullYear() - 2000}.${
now.getUTCMonth() + 1
}.${now.getUTCDate()}-${now.getUTCHours() * 60 + now.getUTCMinutes()}`
}
/**
* @type {import('electron-builder').Configuration}
* @see https://www.electron.build/configuration/configuration
*/
const config = {
appId: 'com.toimc.community.desktop',
directories: {
output: 'dist',
buildResources: 'buildResources'
},
publish: {
provider: 'github'
},
files: ['packages/**/dist/**', 'packages/main/locales/**'],
extraMetadata: {
version: process.env.VITE_APP_VERSION
// version: '1.0.0'
},
productName: 'toimc技术社区HD',
dmg: {
background: 'buildResources/background.tiff'
},
mac: {
category: 'public.app-category.lifestyle',
icon: 'buildResources/icon.icns',
// target: ['dmg'],
entitlements: 'buildResources/entitlements.mac.plist',
entitlementsInherit: 'buildResources/entitlements.mac.plist',
provisioningProfile: path.join(__dirname, './buildResources/toimchd.provisionprofile'),
hardenedRuntime: true
// bundleVersion: 2,
// bundleShortVersion: 1.0.0
},
win: {
target: ['nsis', 'zip']
// windows受信证书大概需要3000一年。
// verifyUpdateCodeSignature: false,
// signingHashAlgorithms: ['sha256'],
// certificateFile: 'XXX.pfx',
// certificatePassword: 'XXXX'
},
nsis: {
oneClick: false,
allowToChangeInstallationDirectory: true,
shortcutName: 'toimc技术社区'
},
linux: {
target: ['deb', 'tar.xz'],
category: 'Office',
executableName: 'toimc-community',
icon: 'buildResources/icon.png'
},
afterSign: 'electron-builder-notarize'
// afterSign: 'scripts/notarize.js'
}
module.exports = config
# MacOS证书配置
如果没有证书会有一个打包提示:
证书分类:
- 软件签名证书(分平台),主要的作用就是在安装的时候不会提示未受信的开发者。
- macOS开发者证书
申请证书的过程,可以参考:苹果开发者介绍
如果只是分发到第三方平台,不需要上架到AppStore,可以申请Developer ID Application
类型的证书。
导出证书 到特定的目录:
如果本地登录了开发者,使用
compile
命令,会自动匹配。如果未登录开发者,可以通过环境变更 进行设置
export CSC_LINK=/your-cert-path/cert.p12 export CSC_KEY_PASSWORD=your-cert-key-password
然后再打包即可。