Electron Forge | 跨平台实战详解(中)

简介

上篇 介绍了 Electron 和 Electron Builder 的基本用法，本篇将介绍更常用也更方便的打包工具，Electron Forge 。
Electron Forge 是一个为 Electron 应用的开发、打包和分发而设计的全功能工具集。它整合了多个底层 Electron 工具到一个统一的命令行界面中，极大简化开发和部署流程。

参考文档：

  • 官方文档 – Electron Forge
  • 打包教程 – Packaging Your Application

准备工作

首先，将项目环境重置为 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-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 make

electron-forge make 命令背后包含了两个步骤：

  1. 在后台执行 electron-forge package，将应用代码与 Electron 二进制文件捆绑在一起。打包后的代码会被输出到一个文件夹中。
  2. 使用该文件夹为每个配置的创建一个单独的可分发文件。

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 -- --arch="ia32"

设置应用图标

参考文档: Custom App Icons

为 Electron 应用设置专业的图标，需要按照特定的格式和大小标准进行创建。以下是每个操作系统推荐的文件格式和图标大小：

操作系统格式大小
macOS.icns512x512 像素（视网膜显示屏为 1024x1024）
Windows.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-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" ]; 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 --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 平台打包

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 平台打包

对于 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 是一个强大的自动化工具，用于自动执行构建、测试和部署等多种操作。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/836781.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

中学生政史地杂志中学生政史地杂志社中学生政史地编辑部2024年第3期目录

中学生政史地杂志中学生政史地杂志社中学生政史地编辑部2024年第3期目录

每月时政 时政要闻&#xff08;2024年2月&#xff09; 李伟; 3-12 热点聚焦 关注2024年全国两会 汤健云; 13-15 积极应对老龄化&#xff0c;发展银发经济 王吉兴; 16-18《中学生政史地》投稿&#xff1a;cn7kantougao163.com “一带一路”助力柬埔寨经济发展 李…
阅读更多...
上海计算机学会2022年5月月赛C++丙组T3打印金字塔

上海计算机学会2022年5月月赛C++丙组T3打印金字塔

题目描述 给定一个整数 n&#xff0c;请打印一个具有 n 层结构的三角形金字塔&#xff0c;例如当 n3 时&#xff0c;打印如下图形&#xff1a; /\ /__\/\ /\/__\/__\/\ /\ /\ /__\/__\/__\输入格式 单个整数&#xff1a;表示 n。 输出格式 根据题意输出层次为 n 的三角形…
阅读更多...
迅睿CMS中实现关键词搜索高亮

迅睿CMS中实现关键词搜索高亮

在迅睿CMS系统中实现关键词搜索高亮是提升用户体验和搜索效果的重要手段。当用户搜索某个关键词时&#xff0c;将搜索结果中的关键词高亮显示&#xff0c;可以帮助用户更快速地定位到所需信息。 关键词高亮的实现 在迅睿CMS中&#xff0c;你可以使用内置的dr_keyword_highlig…
阅读更多...
kettle

kettle

文章目录 读取共享数据库连接报错 读取共享数据库连接报错 读取共享数据库连接报错 解决方法&#xff1a;修改共享文件中的中文字符&#xff0c;文件位置一般是默认的&#xff1a;C:\Users\Administrator.kettle。将shared.xml文件中的中文字符改成英文后问题就解决了。
阅读更多...
【其他学习参考文档记录】

【其他学习参考文档记录】

交叉编译学习参考 nodejs 交叉编译-cliff工作室
阅读更多...
2024年淘宝天猫618超级红包领取口令活动时间是从什么时候开始到几月几号结束？

2024年淘宝天猫618超级红包领取口令活动时间是从什么时候开始到几月几号结束？

2024年淘宝天猫618活动&#xff0c;将于2024年5月19日开始&#xff0c;今年618淘宝天猫取消了预售环节。同时&#xff0c;618淘宝天猫也提供了多项优惠活动&#xff1a;超级红包、跨店满减、官方立减、全程价保及草柴APP领优惠券拿购物返利等多重优惠活动。 2024年淘宝天猫618…
阅读更多...
SqlServer 查询数据库 和 数据表 大小的语句

SqlServer 查询数据库 和 数据表 大小的语句

–Sqlserver 查询数据库 大小 SELECT * FROM (SELECT DB_NAME(database_id) AS DatabaseName,type_desc AS FileType,name AS FileName,size * 8 / 1024/1024 AS FileSizeGBFROM sys.master_filesWHERE type 0 -- 数据文件AND state 0 -- 在线状态 ) T1 ORDER BY FileSizeG…
阅读更多...
自媒体从0-1起号全流程落地指南。（含工具）

自媒体从0-1起号全流程落地指南。（含工具）

下面开始进入主题&#xff1a; 一、持续涨粉的技巧 持续账号的账号通常是具备以下的几种特征 ①利他性&#xff1a;利他性的核心在于你向用户提供了什么&#xff1f; 可以透过逆向思维来体现&#xff0c;首先要明确目标人群及其需求&#xff0c;然后根据这些需求提供必要的…
阅读更多...
HarmonyOS开发案例：【UIAbility内和UIAbility间页面的跳转】

HarmonyOS开发案例：【UIAbility内和UIAbility间页面的跳转】

UIAbility内和UIAbility间页面的跳转&#xff08;ArkTS&#xff09; 介绍 基于Stage模型下的UIAbility开发&#xff0c;实现UIAbility内和UIAbility间页面的跳转。包含如下功能&#xff1a; UIAbility内页面的跳转。跳转到指定UIAbility的首页。跳转到指定UIAbility的指定页…
阅读更多...
C语言学习（十）结构体

C语言学习（十）结构体

目录 一、结构体类型定义二、结构体变量的定义三、结构体变量赋值1. 定义结构体变量的同时进行赋值2. 定义结构体类型的同时定义变量并进行赋值3. 在定义结构体变量时对指定成员进行赋值4. 在定义完结构体变量后&#xff0c;通过.进行赋值 四、结构体成员访问五、结构体内部指针…
阅读更多...
MYSQL：MySQL 事务隔离级别详解

MYSQL：MySQL 事务隔离级别详解

一、MySQL事务是什么&#xff1f; MySQL事务是一组在数据库中执行的操作&#xff0c;这些操作要么全部成功执行&#xff0c;要么全部不执行&#xff0c;以确保数据库的完整性和一致性。 事务的 ACID 事务具有四个特征&#xff1a;原子性&#xff08; Atomicity &#xff09;、…
阅读更多...
用Robotframework+selenium 进行webui页面自动化测试

用Robotframework+selenium 进行webui页面自动化测试

Robotframework其实就是一个自动化的框架&#xff0c;想要进行什么样的自动化测试&#xff0c;就需要在这框架上添加相应的库文件&#xff0c;而用于webui页面自动化测试的就是selenium库. ​ 关于robotframework框架的搭建我这里就不说了&#xff0c;今天就给大家根据一个登录…
阅读更多...
HarmonyOS开发案例：【Stage模型下Ability的创建和使用】

HarmonyOS开发案例：【Stage模型下Ability的创建和使用】

介绍 基于Stage模型&#xff0c;对Ability的创建和使用进行讲解。首先在课程中我们将带领大家使用DevEco Studio创建一个Stage模型Ability&#xff0c;并使用UIAbilityContext启动另一个Ability&#xff0c;然后借助Want&#xff0c;在Ability之间传递参数&#xff0c;最后我们…
阅读更多...
搜维尔科技：数据手套用于外固定虚拟现实模拟 、外固定增强现实模拟

搜维尔科技：数据手套用于外固定虚拟现实模拟 、外固定增强现实模拟

数据手套用于外固定虚拟现实模拟、外固定增强现实模拟 搜维尔科技&#xff1a;数据手套用于外固定虚拟现实模拟、外固定增强现实模拟
阅读更多...
【深度学习】最强算法之：Word2Vec

【深度学习】最强算法之：Word2Vec

Word2Vec 1、引言2、Word2Vec2.1 定义2.2 原理2.3 实现方式2.4 算法公式2.5 代码示例 3、总结 1、引言 小屌丝&#xff1a;鱼哥&#xff0c; help ,help 小鱼&#xff1a; 你这是在鱼塘里面无法呼吸了&#xff1f; 小屌丝&#xff1a;… 别闹&#xff0c;鱼哥&#xff0c; 小鱼…
阅读更多...
Dread Hunger 海上狼人杀服务器开服教程

Dread Hunger 海上狼人杀服务器开服教程

1、购买后登录服务器&#xff0c;百度莱卡云 1.1、第一次购买服务器会安装游戏端&#xff0c;大约5分钟左右&#xff0c;如果长时间处于安装状态请联系客服 2、创建端口 点击网络创建第二个端口作为副端口&#xff08;副端口的作用是用于第二局游戏&#xff0c;因为游戏BUG&am…
阅读更多...
Unity导出的webgl包在浏览器下报错:Unable to parse Build/导出的项目名称.framework.js.gz

Unity导出的webgl包在浏览器下报错:Unable to parse Build/导出的项目名称.framework.js.gz

先根据链接Unity WebGL项目打包后本地打开报错问题解决方法_unity 打包webgl报错:webassembly.instantiate()-CSDN博客文档操作一番后，在360极速里面兼容模式——黑屏如图： 极速模式：进度条走不满，在谷歌浏览器里面的红色报错文字不出现。 然后打开谷歌浏览器，报如下错：…
阅读更多...
Android 上传aar文件到maven仓库 失败问题

Android 上传aar文件到maven仓库 失败问题

之前使用的是maven插件&#xff0c;导致自己的sdk 引用其他远程aar库&#xff0c;找不到类 后期换成maven-publish就解决了 apply plugin: maven-publishdef POM_VERSION 1.0.22 def POM_ARTIFACTID "downloadLibrary"//项目名称id def POM_GROUPID xxxx //项目…
阅读更多...
蓝桥杯备战8.快乐的跳

蓝桥杯备战8.快乐的跳

P1152 欢乐的跳 - 洛谷 | 计算机科学教育新生态 (luogu.com.cn) 刚开始看错题了&#xff0c;没看见要相邻的差 #include<bits/stdc.h> #define endl \n #define int long long using namespace std; const int N 2e710,M 1e310; int a[N],b[N]; signed main() {std::…
阅读更多...
如何把握人力RPO的蓝海机遇？实战策略分享！

如何把握人力RPO的蓝海机遇？实战策略分享！

随着企业间竞争的日益激烈&#xff0c;人力资源管理的重要性愈发凸显。在众多人力资源管理策略中&#xff0c;招聘流程外包(RPO)作为一种新兴的服务模式&#xff0c;逐渐受到业界的关注。那么&#xff0c;人力RPO是否是蓝海项目?我们又该如何实施RPO呢? 一、人力RPO&#xff…
阅读更多...
最新文章

Copyright @ 2022~2023