赞
踩
上篇 介绍了 Electron 和 Electron Builder 的基本用法,本篇将介绍更常用也更方便的打包工具,Electron Forge 。
Electron Forge 是一个为 Electron 应用的开发、打包和分发而设计的全功能工具集。它整合了多个底层 Electron 工具到一个统一的命令行界面中,极大简化开发和部署流程。
参考文档:
首先,将项目环境重置为 Vue 的开发环境。或者创建一个新项目:
npm create vite@latest electron-demo
加入 Electron 依赖,这部分 上篇 已经详细介绍,主要步骤包括:安装依赖,添加 main.js
和 preload.js
文件,修改 package.json
文件,支持 electron 热更新开发,只是去掉了最后的 electron-builder
的配置。
安装 @electron-forge/cli
npm install --save-dev @electron-forge/cli
用 npx electron-forge import
命令将现有的 Electron 项目转换为 Electron Forge 项目。这一步会自动生成 forge.config.js
配置文件。
npx electron-forge import
安装额外依赖,根据目标平台,安装相应的打包工具(makers)。
# 可以写成一行,这里分开写方便理解
npm install --save-dev electron-squirrel-startup
npm install --save-dev @electron-forge/maker-squirrel
npm install --save-dev @electron-forge/maker-deb
npm install --save-dev @electron-forge/maker-rpm
npm install --save-dev @electron-forge/maker-zip
npm install --save-dev @electron-forge/maker-dmg
这些依赖的用处如下,根据需要,选择合适的打包工具(maker),参考 Maker 文档:
包名 | 后缀 | 说明 |
---|---|---|
electron-squirrel-startup | N/A | 管理 Windows 平台下的 Squirrel 安装过程 |
@electron-forge/maker-squirrel | .exe | Windows 的 Squirrel 安装包 |
@electron-forge/maker-deb | .deb | Debian-based Linux 系统的 DEB 包 |
@electron-forge/maker-rpm | .rpm | RPM-based Linux 系统的 RPM 包 |
@electron-forge/maker-zip | .zip | 为各平台创建 ZIP 压缩包 |
@electron-forge/maker-dmg | .dmg | macOS 的 DMG 镜像文件 |
@electron-forge/maker-flatpak | .flatpak | Linux 的 Flatpak 包 |
@electron-forge/maker-snap | .snap | Linux 的 Snapcraft 包 |
@electron-forge/maker-appx | .appx | Windows Store 的 AppX 安装程序 |
注意,跨平台的构建通常还要安装拓展的包:
wine
和 mono
dpkg, fakeroot
维护元数据,在 package.json
文件中更新 author
和 description
字段,帮助用户和其他开发者了解项目的基本信息。而且 Windows 平台的构建,这两个参数是必填的。
简单地运行以下命令:
npm run build
npm run make # npx electron-forge make
electron-forge make
命令背后包含了两个步骤:
electron-forge package
,将应用代码与 Electron 二进制文件捆绑在一起。打包后的代码会被输出到一个文件夹中。mac 系统下,产出的文件结构:
out
├── electron-demo-darwin-arm64
│ ├── LICENSE
│ ├── LICENSES.chromium.html
│ ├── electron-demo.app
│ └── version
└── make
└── zip
└── darwin
└── arm64
└── electron-demo-darwin-arm64-0.0.0.zip
5 directories, 3 files
如果只构建一个平台,可将 npm run build
写在 npm run make
里,一键完成构建。但如果要打包多个平台,则建议分开,npm run build
命令只需执行一次。
Make 参数文档:https://www.electronforge.io/cli#make
在 forge.config.js
中为不同的平台配置特定的打包工具(maker)。例如,以下配置为 macOS 和 Linux 平台创建 ZIP 压缩包:
module.exports = {
makers: [
{
name: '@electron-forge/maker-zip',
platforms: ['darwin', 'linux'],
config: {
// 特定配置
}
}
]
};
支持的配置选项如下:
参数 | 取值 | 描述 |
---|---|---|
--arch | 如 x64 | 目标架构。默认为您当前的架构("host"架构)。允许的值包括:“ia32”, “x64”, “armv7l”, “arm64”, “universal”, 或 “mips64el”。如果有多个值,应用逗号分隔。 |
--platform | 如 mas | 目标平台。通常,您只能在平台 X 上为平台 X 制作包。默认为您正在运行的平台("host"平台)。 |
--targets | 制作目标的逗号分隔列表 | 为此次运行覆盖制作目标。制作工具名是完整的 node 模块名,如 @electron-forge/maker-deb 。默认情况下,使用的制作目标是为给定平台配置和可用的目标。 |
--skip-package | N/A | 如果您希望跳过打包步骤,可设置此选项,特别是在连续执行多次打包时可以节省时间。默认不跳过打包。 |
基本用法示例:
# 默认情况下,make 命令对应一个 npm 脚本:
npm run make -- --arch="ia32"
参考文档: Custom App Icons
为 Electron 应用设置专业的图标,需要按照特定的格式和大小标准进行创建。以下是每个操作系统推荐的文件格式和图标大小:
操作系统 | 格式 | 大小 |
---|---|---|
macOS | .icns | 512x512 像素(视网膜显示屏为 1024x1024) |
Windows | .ico | 256x256 像素 |
Linux | .png | 512x512 像素 |
对于 Windows 和 macOS,可以在 forge.config.js
中配置图标路径。由于 Electron Forge 会自动为每个平台添加正确的扩展名,因此无需在路径中包含 .ico
或 .icns
后缀。
module.exports = {
// 其他配置...
packagerConfig: {
icon: '/path/to/icon' // 路径中不包括文件扩展名
}
// 其他配置...
};
可以用相对 forge.config.js
文件的路径,或者绝对路径。可以省略扩展名,以同时支持多个平台。
对于 Linux,配置图标的路径则需要在 forge.config.js
中指定:
module.exports = {
// 其他配置...
makers: [
{
name: '@electron-forge/maker-deb',
config: {
options: {
icon: '/path/to/icon.png'
}
}
}
]
// 其他配置...
}
同时,在实例化 BrowserWindow
时,也需要指定图标:
// main.js
const { BrowserWindow } = require('electron')
const win = new BrowserWindow({
// 其他配置...
icon: '/path/to/icon.png'
});
此外,安装程序的图标配置可以单独配置,详见文档。
Windows 的 .ico
文件可直接用 ImageMagick 转换:
# 安装 ImageMagick
# brew install imagemagick # macOS
# sudo apt-get install imagemagick # Ubuntu
convert avatar.png output.ico
convert avatar.png -define icon:auto-resize="256,128,64,48,32,16" output.icns
macOS 的 .icns
可以用 png2icns
来转化:
npm install png2icns -g
png2icns /path/to/icon.png -s 16,32,64,128,256
但实测部分图标会转化失败。可以手写脚本,基于系统自带的 sips
和 iconutil
工具来转换图标:
#!/bin/bash # 检查参数是否传入及图片文件是否存在 if [ "$#" -lt 1 ] || [ ! -f "$1" ]; then echo "用法: $0 <图片路径> [最大尺寸]" exit 1 fi PIC_FILE=$1 MAX_SIZE=${2-1024} # 设置默认最大尺寸为1024 # 检查 sips 和 iconutil 命令是否存在 if ! command -v sips &> /dev/null || ! command -v iconutil &> /dev/null; then echo "sips 或 iconutil 工具不存在。脚本需要在 macOS 上运行。" exit 1 fi # 转换图片到不同的尺寸并创建 icns 文件 mkdir -p tmp.iconset && for sz in 16 32 64 128 256 512 1024; do if [ $sz -le $MAX_SIZE ]; then sips -z $sz $sz "$PIC_FILE" --out tmp.iconset/icon_${sz}x${sz}.png fi if [ $sz -ge 32 ] && [ $(($sz * 2)) -le $MAX_SIZE ]; then sips -z $(($sz * 2)) $(($sz * 2)) "$PIC_FILE" --out tmp.iconset/icon_${sz}x${sz}@2x.png fi done && iconutil -c icns tmp.iconset -o Icon.icns && rm -r tmp.iconset
针对 macOS 平台,需要分别考虑 ARM 和 Intel 架构。以下命令将分别为这两种架构生成安装包:
# 为 macOS Intel 架构打包
npx electron-forge make --platform=darwin --arch=x64 --targets="@electron-forge/maker-dmg" --icon=public/rex
# 为 macOS ARM 架构打包
npx electron-forge make --platform=darwin --arch=arm64 --targets="@electron-forge/maker-dmg" --icon=public/rex
# 为 macOS ARM 架构打包 | 输出 .app 可执行文件
npx electron-forge make --platform=darwin --arch=arm64 --targets="@electron-forge/maker-zip" --icon=public/rex
Windows 7 和 Windows 10 系统,可以使用以下命令进行打包:
# 打包为 Windows 安装程序 (x64)
npx electron-forge make --platform=win32 --arch=x64 --targets="@electron-forge/maker-squirrel" --icon=public/rex
# 打包为 Windows 安装程序 (x86)
npx electron-forge make --platform=win32 --arch=ia32 --targets="@electron-forge/maker-squirrel" --icon=public/rex
对于 Ubuntu Linux,我们将打包为 .deb 格式,适用于基于 Debian 的系统:
# 打包为 Ubuntu .deb 包
npx electron-forge make --platform=linux --arch=x64 --targets="@electron-forge/maker-deb" --icon=public/rex
以上,根据不同的操作系统和架构需求,为 Electron 应用创建安装包。更详细的配置和参数设置,可参考 Electron Forge 文档。
到这里,我们已经能在本地针对不同平台打包应用。
下一篇我们将介绍如何利用 GitHub Actions 自动化构建和发布 Electron 应用。GitHub Actions 是一个强大的自动化工具,用于自动执行构建、测试和部署等多种操作。
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。