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.jspreload.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 的安装包,需安装 winemono
  • 在 Mac 上构建 Linux 的安装包,需安装 dpkg, fakeroot

修改配置

维护元数据,在 package.json 文件中更新 authordescription 字段,帮助用户和其他开发者了解项目的基本信息。而且 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

但实测部分图标会转化失败。可以手写脚本,基于系统自带的 sipsiconutil 工具来转换图标:

#!/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/diannao/10854.shtml

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

相关文章

01-单片机商业项目编程,从零搭建低功耗系统设计

一、引言 这是关于《单片机商业编程之从零搭建低功耗系统》的第一篇章&#xff0c;个人善忘&#xff0c;平常项目设计当中的一些思路&#xff0c;以前年轻的时候习惯性的录制成视频&#xff0c;也算是当作是自己的笔记&#xff0c;无奈现在喉咙实在扛不住&#xff0c;因此先尝试…

德克萨斯大学奥斯汀分校自然语言处理硕士课程汉化版(第一周) - 自然语言处理介绍和线性分类

自然语言处理介绍和线性分类 1. 自然语言处理介绍2. 线性二分类3. 情感分析和基础特征提取 3.1. 情感分析3.2. 特征提取3.3. 文本预处理 4. 学习的基础-梯度下降算法5. 感知机6. 逻辑回归7. 情感分析8. 感知机和逻辑回归 1. 自然语言处理介绍 自然语言处理的目标是什么 能够解…

(2024,KAN,MLP,可训练激活函数,样条函数,分层函数)Kolmogorov–Arnold 网络

KAN: Kolmogorov–Arnold Networks 公和众和号&#xff1a;EDPJ&#xff08;进 Q 交流群&#xff1a;922230617 或加 VX&#xff1a;CV_EDPJ 进 V 交流群&#xff09; 目录 0. 摘要 1. 简介 2. KAN 2.1 KA 表示定理 2.2 KAN 架构 2.3 KAN 的逼近能力和缩放定律 2.4 对于…

国产操作系统下使用dpkg命令管理软件包 _ 统信 _ 麒麟 _ 中科方德

往期好文&#xff1a;国产操作系统下Chrome的命令行使用 | 统信 | 麒麟 Hello&#xff0c;大家好啊&#xff01;在Linux系统中&#xff0c;dpkg是Debian包管理系统的基础命令工具&#xff0c;它允许用户安装、卸载、查询和管理软件包。在国产操作系统如统信UOS和麒麟KOS、中科方…

字节码基础

基本概念 java中的字节码&#xff0c;英文bytecode。是java代码编译后的中间代码格式。JVM需要读取并解析字节码才能执行相应的任务。java字节码是JVM的指令集。JVM加载字节码格式的class文件。校验之后通过JIT编译器转换成本机机器代码执行。 java字节码简介 1、java byteco…

阿里云部署ChatGLM-6B及ptuning微调教程

一、模型部署 1.进入阿里云人工智能平台PAI。 2.申请免费试用。 3.打开交互式建模 PAI-DSW。 4.新建实例。 5.填写配置。 6.实例准备完成后点击打开。 7.打开实例后点击Teminal。 8.在Teminal中依次输入以下命令并执行。 apt-get update apt-get install git-lfs git lfs ins…

SQLite利用事务实现批量插入(提升效率)

在尝试过SQLite批量插入一百万条记录&#xff0c;执行时长高达20多分钟后&#xff0c;就在想一个问题&#xff0c;这样的性能是不可能被广泛应用的&#xff0c;更不可能出现在真实的生产环境中&#xff0c;那么对此应该如何优化一下呢&#xff1f; 首先分析一下批量插入的逻辑 …

React Router DOM BrowserRouter

是 React Router DOM 库中的一个核心组件&#xff0c;它用于在 React 应用程序中设置路由&#xff0c;并允许你使用 HTML5 的 history API 来管理 URL。BrowserRouter 使用浏览器提供的 history API 来跟踪和管理 URL 的变化&#xff0c;这使得你可以在不刷新整个页面的情况下改…

蓝桥杯-地宫取宝

X 国王有一个地宫宝库&#xff0c;是 nm 个格子的矩阵&#xff0c;每个格子放一件宝贝&#xff0c;每个宝贝贴着价值标签。 地宫的入口在左上角&#xff0c;出口在右下角。 小明被带到地宫的入口&#xff0c;国王要求他只能向右或向下行走。 走过某个格子时&#xff0c;如果那个…

网络工程师----第二十四天

计算机基础 第一章&#xff1a;概述 互联网的组成&#xff1a; &#xff08;1&#xff09;边缘部分&#xff1a;由所有连接在互联网上的主机组成。这部分是用户直接使用的&#xff0c;用来进行通信&#xff08;传送数据、音频或视频&#xff09;和资源共享。 &#xff08;2…

Python大数据分析——Logistic回归模型

Logistic回归模型 概念理论分析模型评估混淆矩阵ROC曲线KS曲线 函数示例 概念 之前的回归的变量是连续的数值变量&#xff1b;而Logistics回归是二元离散值&#xff0c;用来解决二分类问题。 理论分析 上式中的hβ(X)也被称为Loqistic回归模型&#xff0c;它是将线性回归模型…

2-1 EXTI外部中断(gd32)

中断的概念 中断硬件结构/软件结构 EXTI中断 EXTI硬件结构 注&#xff1a;EXTI线在同一时刻只能连接一个GPIO口&#xff0c;如果我们先连接了PA0,然后又连接了PB0那么此时PA0这个IO口就失去作用。 中断触发函数 中断优先级 中断优先级 数值越小优先级越高&#xff0c;抢占优先级…

247 基于matlab的梁的振型仿真

基于matlab的梁的振型仿真。利用有限元理论&#xff0c;求二维梁的固有频率和振型。短边固定&#xff0c;给定长度、横截面积&#xff0c;弹性模量及材料密度已知。并对比理论计算结果进行分析。各参数自己设定。程序已调通&#xff0c;可直接运行。 247 梁的振型仿真 固有频率…

iOS 让APP支持横竖屏

代码示例 Appdelegate添加属性&#xff08;在Appdelegate.m中添加该属性&#xff09; /** 是否允许横屏属性*/ property (nonatomic,assign)BOOL isAllowRotation; 设置可以支持的方向&#xff08;在AppDelegate.m中添加&#xff09; - (UIInterfaceOrientationMask)appli…

Unity2D 模拟手柄实现玩家移动

1&#xff0c;创建控制器UI 2&#xff0c;挂载脚本 3&#xff0c;脚本编写 基本要素 [Tooltip("玩家游戏体")]public Rigidbody2D player;[Tooltip("玩家速度")]public float speed 1f;[Tooltip("玩家动画")]public Animator animator;public …

企业级复杂前中台项目响应式处理方案

目录 01: 前言 02: 响应式下navigtionBar实现方案分析 数据 视图 小结 03: 抽离公用逻辑&#xff0c;封装系列动作 04: PC端navigationBar私有逻辑处理 05: 分析 navigationBar 闪烁问题 06: 处理 navigationBar 闪烁问题 07: category数据缓存&#xff0c;覆盖…

Android 13 系统自定义安全水印

效果 源码实现 frameworks/base/services/core/java/com/android/server/am/ActivityManagerService.java public final void showSafeModeOverlay() {View v LayoutInflater.from(mContext).inflate(com.android.internal.R.layout.safe_mode, null);WindowManager.Layout…

程序员工作中常见问题,你遇到过几个?

在赛博朋克2077玩后感中&#xff0c;我提到&#xff0c;即便是在严谨的机制下&#xff0c;依然可能出现让人匪夷所思或是贻笑大方的问题。 那么今天&#xff0c;就以后端程序员的视角&#xff0c;盘点下从设计开发到上线的常见问题&#xff0c;看看大家中过几个。 01 设计与开…

问题与解决:大华视频后台播放报错

大华播放器接到BI系统后&#xff0c;实时监控视频后台播放一段时间后&#xff0c;报错如下&#xff1a; The play() request was interrupted because video-only background media was paused to save power. 在谷歌浏览器下&#xff0c;直接用代码运行系统&#xff0c;视频在…

python软件测试Jmeter性能测试JDBC Request(结合数据库)的使用详解

这篇文章主要介绍了python软件测试Jmeter性能测试JDBC Request(结合数据库)的使用详解,文中通过示例代码介绍的非常详细&#xff0c;对大家的学习或者工作具有一定的参考学习价值&#xff0c;需要的朋友们下面随着小编来一起学习学习吧 JDBC Request 这个 Sampler 可以向数据…