做平面设计在什么网站能挣钱,邵武网站建设wzjseo,线上商城模板,正规的营销型网站建设简介
上篇 介绍了 Electron 和 Electron Builder 的基本用法#xff0c;本篇将介绍更常用也更方便的打包工具#xff0c;Electron Forge 。 Electron Forge 是一个为 Electron 应用的开发、打包和分发而设计的全功能工具集。它整合了多个底层 Electron 工具到一个统一的命令…简介
上篇 介绍了 Electron 和 Electron Builder 的基本用法本篇将介绍更常用也更方便的打包工具Electron Forge 。 Electron Forge 是一个为 Electron 应用的开发、打包和分发而设计的全功能工具集。它整合了多个底层 Electron 工具到一个统一的命令行界面中极大简化开发和部署流程。
参考文档
官方文档 – Electron Forge打包教程 – Packaging Your Application
准备工作
首先将项目环境重置为 Vue 的开发环境。或者创建一个新项目
npm create vitelatest 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-startupN/A管理 Windows 平台下的 Squirrel 安装过程electron-forge/maker-squirrel.exeWindows 的 Squirrel 安装包electron-forge/maker-deb.debDebian-based Linux 系统的 DEB 包electron-forge/maker-rpm.rpmRPM-based Linux 系统的 RPM 包electron-forge/maker-zip.zip为各平台创建 ZIP 压缩包electron-forge/maker-dmg.dmgmacOS 的 DMG 镜像文件electron-forge/maker-flatpak.flatpakLinux 的 Flatpak 包electron-forge/maker-snap.snapLinux 的 Snapcraft 包electron-forge/maker-appx.appxWindows Store 的 AppX 安装程序
注意跨平台的构建通常还要安装拓展的包
DMG 文件只能在 macOS 计算机上构建在 Mac 上构建 Windows 的安装包需安装 wine 和 mono在 Mac 上构建 Linux 的安装包需安装 dpkg, fakeroot
修改配置
维护元数据在 package.json 文件中更新 author 和 description 字段帮助用户和其他开发者了解项目的基本信息。而且 Windows 平台的构建这两个参数是必填的。
默认环境打包
简单地运行以下命令
npm run build
npm run make # npx electron-forge makeelectron-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.zip5 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-packageN/A如果您希望跳过打包步骤可设置此选项特别是在连续执行多次打包时可以节省时间。默认不跳过打包。
基本用法示例
# 默认情况下make 命令对应一个 npm 脚本
npm run make -- --archia32设置应用图标
参考文档: Custom App Icons
为 Electron 应用设置专业的图标需要按照特定的格式和大小标准进行创建。以下是每个操作系统推荐的文件格式和图标大小
操作系统格式大小macOS.icns512x512 像素视网膜显示屏为 1024x1024Windows.ico256x256 像素Linux.png512x512 像素
对于 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-resize256,128,64,48,32,16 output.icnsmacOS 的 .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 ]; thenecho 用法: $0 图片路径 [最大尺寸]exit 1
fiPIC_FILE$1
MAX_SIZE${2-1024} # 设置默认最大尺寸为1024# 检查 sips 和 iconutil 命令是否存在
if ! command -v sips /dev/null || ! command -v iconutil /dev/null; thenecho 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 ]; thensips -z $sz $sz $PIC_FILE --out tmp.iconset/icon_${sz}x${sz}.pngfiif [ $sz -ge 32 ] [ $(($sz * 2)) -le $MAX_SIZE ]; thensips -z $(($sz * 2)) $(($sz * 2)) $PIC_FILE --out tmp.iconset/icon_${sz}x${sz}2x.pngfidone iconutil -c icns tmp.iconset -o Icon.icns rm -r tmp.iconset不同平台的打包实战
macOS 平台
针对 macOS 平台需要分别考虑 ARM 和 Intel 架构。以下命令将分别为这两种架构生成安装包
# 为 macOS Intel 架构打包
npx electron-forge make --platformdarwin --archx64 --targetselectron-forge/maker-dmg --iconpublic/rex# 为 macOS ARM 架构打包
npx electron-forge make --platformdarwin --archarm64 --targetselectron-forge/maker-dmg --iconpublic/rex# 为 macOS ARM 架构打包 | 输出 .app 可执行文件
npx electron-forge make --platformdarwin --archarm64 --targetselectron-forge/maker-zip --iconpublic/rexWindows 平台打包
Windows 7 和 Windows 10 系统可以使用以下命令进行打包
# 打包为 Windows 安装程序 (x64)
npx electron-forge make --platformwin32 --archx64 --targetselectron-forge/maker-squirrel --iconpublic/rex# 打包为 Windows 安装程序 (x86)
npx electron-forge make --platformwin32 --archia32 --targetselectron-forge/maker-squirrel --iconpublic/rexUbuntu Linux 平台打包
对于 Ubuntu Linux我们将打包为 .deb 格式适用于基于 Debian 的系统
# 打包为 Ubuntu .deb 包
npx electron-forge make --platformlinux --archx64 --targetselectron-forge/maker-deb --iconpublic/rex小结
以上根据不同的操作系统和架构需求为 Electron 应用创建安装包。更详细的配置和参数设置可参考 Electron Forge 文档。
到这里我们已经能在本地针对不同平台打包应用。
下一篇我们将介绍如何利用 GitHub Actions 自动化构建和发布 Electron 应用。GitHub Actions 是一个强大的自动化工具用于自动执行构建、测试和部署等多种操作。
