打包macOS应用

Mister.Duan2024年12月23日...大约 9 分钟

打包macOS应用

在 Electron 中，要对应用进行打包，可用方案有好几套：

Electron Packager
Electron Builder
Electron Forge

Electron Packager

Electron Packager 是一个用于 Electron 应用的命令行工具，能够帮助我们将 Electron 应用打包成各个平台（Windows, macOS, Linux）的可分发格式。它提供了很多自定义选项，比如设置图标、应用名称、版本号等。结合其他的工具，然后再使用 Electron Packager 可以很方便地为应用生成不同平台的安装包。

特点：

它是一个简单、灵活的工具，适合于快速将Electron应用打包成可执行文件。
支持多平台打包，包括Windows、macOS和Linux。
允许自定义打包选项，如应用图标、版本号、应用名称等。
不内置生成安装程序的功能，但你可以结合其他工具（如NSIS、DMG）来创建安装包。

适用场景：

适合于小型或中型项目，对打包过程的要求不是特别复杂。
当你只需要简单地将应用打包成可执行文件，不需要额外的安装程序或更新机制时。

Electron Builder

Electron Builder 针对大多数构建任务重新编写了自己的内部逻辑，提供了丰富的功能，包括代码签名、发布支持、文件配置、多种目标构建等。Electron Builder 不限制使用的框架和打包工具，使得可以更加灵活地进行配置和打包。

特点：

提供了一套全面的解决方案，包括打包、创建安装程序、自动更新等。
支持广泛的安装包格式，如NSIS、AppImage、DMG、Snap等，适用于不同平台。
高度可配置，可以通过 electron-builder.yml（或 json、toml）文件详细控制打包和分发过程。
内置自动更新机制，与GitHub、S3等服务紧密集成，方便应用发布和更新。

适用场景：

适合于需要复杂打包和分发流程的中大型项目。
当你需要创建专业的安装程序，并实现自动更新功能时。

Electron Forge

Electron Forge 因为是官方维护的产品，所以当 Electron 支持新的应用程序构建功能时，它会立即集成这些新的能力。另外，Electron Forge 专注于将现有的工具组合成一个单一的构建流程，因此更易于跟踪代码的流程和扩展。

特点：

是一个综合性的工具，提供了开发到打包的全流程支持。
集成了Webpack、Electron Packager和Electron Builder的部分功能，提供了一站式的开发体验。
通过插件系统扩展功能，支持自定义Webpack配置、React、Vue等前端框架。
简化了开发和打包流程，通过简单的命令即可启动开发环境、打包和创建安装程序。

适用场景：

适合于所有规模的项目，特别是那些希望通过一套工具管理整个Electron应用生命周期的项目。
当你需要一个简单而全面的解决方案，不仅包括打包，还包括开发过程中的实时重新加载、打包优化等。

针对上面三个工具，简单总结一下：

Electron Pakcager：简单，灵活，适合于打包的基础需求。
Electron Builder：全面、功能丰富，支持各种各样的配置，适合于需要复杂打包流程和高度定制的项目。
Electron Forge：官方出品，集成度高，可以一站式管理 Electron 应用的生命周期。

图标

关于图标这一块儿，我们又不是 UI，所以可以去找一些现成的免费的 icon 来用。

Icon Generator：https://icongenerator.net/

在该网站找到一个合适的图标，下载之后放置于你的项目对应的目录里面即可。

另外，在打包 macOS 应用的时候，需要的不仅仅是一个图标，而是**一组图标**，一组不同尺寸大小的图标，方便应用在不同地方显示合适尺寸的图标。

这里我们可以借助 electron-icon-builder 这个插件，可以快速的基于我们所提供的图标模板生成一套不同尺寸的图标。

npm install electron-icon-builder -D

之后就可以在 package.json 里面配置一条脚本命令：

"scripts": {
  "build-icon": "electron-icon-builder --input=./assets/markdown.png --flatten"
}

进行打包配置

主要是配置一个名为 build 的配置项，主要需要配置的内容如下：

appId：这个是我们应用的唯一标识符，一般会采用反向域名的格式。（假设我们应用的官网对应的地址：markdown.duyi.com，那么这里 appId 就是 com.duyi.markdown）
- 来看一些有名的应用在 appId 上面的示例
- Visual Studio Code: com.microsoft.vscode
- Slack: com.tinyspeck.slackmacgap
- WhatsApp: com.whatsapp.desktop
- Skype: com.skype.skype
- Discord: com.hnc.Discord
mac 配置
- category：你的应用在 macOS 上面的一些类别，例如我们的 markdown 是属于工具类应用，那么在 macOS 平台，就有一个分类，名为 public.app-category.utilities
  - 这里来看一下其他有名的应用的分类填写示例
  - public.app-category.developer-tools: 开发工具，示例：Visual Studio Code, Sublime Text, Atom
  - public.app-category.utilities: 实用工具，示例：Alfred, CleanMyMac, DaisyDisk
  - public.app-category.social-networking: 社交网络，示例：Slack, WhatsApp Desktop, Telegram
  - public.app-category.music: 音乐，示例：Spotify, Apple Music
  - public.app-category.productivity: 生产力，示例：Microsoft Office Suite, Notion, Evernote
- target：对应的是要打包的目标格式，值为一个数组，数组里面的值经常填写的为 dmg 和 pkg
dmg 格式相关配置
- title：打包成 dmg 格式时，磁盘映像对应的标题
- icon：对应的就是一组 icon 的目录
- background：dmg 窗口的背景图路径
- window：dmg 窗口的大小，通过 width 和 height 来进行指定
- contents：指定 dmg 窗口里面，应用和目录具体显示的位置。
pkg 格式相关配置
- installLocation：指定 pkg 安装包在进行安装的时候，将应用安装到的具体位置，一般也是 /Applications 这个位置

更多详细的关于 electron-builder 的配置信息，可以参阅：https://www.electron.build/index.html

下面是我们针对此次项目打包所做的配置信息，如下：

"build": {
  "appId": "com.duyi.markdown",
  "productName": "Markdown Editor",
  "mac": {
    "category": "public.app-category.utilities",
    "target": [
      "dmg",
      "pkg"
    ]
  },
  "dmg": {
    "title": "Markdown Editor",
    "icon": "./icons",
    "background": "./assets/background.jpeg",
    "window": {
      "width": 660,
      "height": 400
    },
    "contents": [
      {
        "x": 180,
        "y": 170
      },
      {
        "x": 480,
        "y": 170,
        "type": "link",
        "path": "/Applications"
      }
    ]
  },
  "pkg": {
    "installLocation": "/Applications"
  }
}

build 这个配置完成之后，我们又可以在 package.json 中添加一条脚本命令：

"scripts": {
  "build": "electron-builder"
}

记得要安装一下 electron-builder

npm install electron-builder -D

接下来运行 npm run build 就可以成功打包，注意打包的时候，有两个信息值得注意：

skipped macOS application code signing  reason=cannot find valid "Developer ID Application" identity or custom non-Apple code signing certificate, it could cause some undefined behaviour, e.g. macOS localized description not visible, see https://electron.build/code-signing allIdentities=     0 identities found

这里的提示信息表示在打包的过程中，跳过了代码签名的验证。

要解决这个问题，你需要有一个有效的 Apple 开发者证书，然后需要执行如下的步骤：

加入苹果开发者计划：如果还没有，你需要加入苹果开发者计划。这通常涉及到一些费用。
创建并下载证书：登录到你的苹果开发者账户，然后在证书、标识符和配置文件部分创建一个新的“Developer ID Application”证书。创建并下载这个证书到你的电脑。
安装证书到钥匙串：双击下载的证书文件，它会自动添加到你的钥匙串访问中。这样，electron-builder 就能在打包应用程序时使用这个证书了。
在 electron-builder 配置中指定证书：在你的 electron-builder 配置文件中（通常是 package.json 中的 build 部分），确保正确设置了代码签名的配置。例如，你可以在配置中指定证书的名称或位置。

"mac": {
  "category": "public.app-category.utilities",
  "target": ["dmg", "zip"],
  "identity": "Developer ID Application: [你的开发者名]"
}

重新打包应用程序：完成上述步骤后，再次使用 electron-builder 打包你的应用程序。这次应该不会出现之前的提示，因为 electron-builder 现在能找到并使用你的开发者 ID 证书进行代码签名了。

Detected arm64 process, HFS+ is unavailable. Creating dmg with APFS - supports Mac OSX 10.12+

这个不是错误，这个仅仅是一个提示信息，告诉你在新的 arm 芯片的 macOS 里面，不再支持 HFS+ 这种文件格式系统。

打包生成文件说明

Markdown Editor-1.0.0-arm64.dmg.blockmap：这个文件是和 dmg 文件相关的 map 文件，该文件主要的作用是为了支持增量更新。
com.duyi.markdown.plist：这是一个属性列表文件，通常用于 macOS 程序存储一些配置信息，例如应用程序的标识符、版本信息、安全权限等。
builder-debug.yml：通常是记录 electron-builder 详细的构建过程的日志信息。
builder-effective-config.yaml：该文件包含了在使用 electron-builder进行打包的时候，实际所使用的配置信息。也就是说，electron-builder 有一个默认的基础配置，然后结合我们所给的 build 配置，最终所生成的，实际所用的配置。

打包windows应用

打包windows应用基本上和上节课介绍的打包 macOS应用大同小异，但是有一些注意点：

在打包 windows 应用的时候，需要填写 author 字段。
关于图标，对应的是一个具体的 ico 格式的文件，而非一组文件
nsis 配置打包出来就是 exe 文件，对应的常见配置项：
- oneClick：false
  - 表示是否需要一键式安装程序，当你设置为 true 的时候，安装包在进行安装的时候，就不会给用户提供相应的选项（用户组的选择、安装路径的选择），全部按照默认配置去安装。
- allowElevation：true
  - 安装程序是否在需要的时候，能够请求提升权限
    - true：表示安装包在进行安装的时候，如果遇到权限不足的情况，那么会向用户请求提升权限。
    - false：表示安装包在进行安装的时候，如果遇到权限不足的场景，直接安装失败。
- allowToChangeInstallationDirectory：true
  - 布尔类型，如果是 true，表示允许用户在安装的过程中修改安装路径。
- createDesktopShortcut：true
  - 是否创建桌面快捷方式
- createStartMenuShortcut：true
  - 是否在 windows 系统的开始菜单创建快捷方式
- shortcutName：string
  - 快捷方式显示的名称

昵称

邮箱

网址

按正序
按倒序
按热度

打包macOS应用

打包macOS应用

图标

进行打包配置

打包生成文件说明

打包windows应用

预览: