使用Electron生成安装包并打包为不同平台的应用格式

导言： 使用Electron开发桌面应用后，我们需要将其打包成适用于不同平台的安装包，例如 Mac 的dmg和 Windows 的exe。本文将介绍如何使用 Electron-forge 自动生成项目文件，并通过简单的步骤实现打包过程。

目录：

1. 初识Electron-forge
   • 1.1 安装Electron-forge
     • 1.2 配置Electron-forge
2. 应用打包
   • 2.1 生成分发包
   • 2.2 创建Windows的EXE文件
   • 2.3 创建Mac的DMG文件
3. 应用打包失败
   • 第一步：下载安装
   • 第二步：生成分发包
   • 第三步：构建 Windows 的 EXE 文件
   • 第四步：构建 Mac 的 DMG 文件
4. 应用签名

1. 初识Electron-forge

Electron-forge是Electron的脚手架工具，可以自动生成项目文件。在这一部分中，我们将了解如何安装Electron-forge并进行配置。

1.1 安装Electron-forge

使用以下命令进行安装：

npx @electron-forge/cli import

安装完成后，package.json 文件将会被修改，增加以下配置。

如果你想将配置独立成一个文件进行管理，可以通过以下步骤实现。

1.2 配置Electron-forge

配置Electron-forge是为了进一步定制和管理Electron项目的打包和构建过程。下面是配置Electron-forge的步骤：

1. 打开项目的package.json文件。
2. 在文件中找到config字段，如果没有，则手动添加该字段。config字段用于配置Electron-forge。
3. 在config字段下添加一个forge字段，并将其值设置为一个指向配置文件的路径。例如：

"config": {
   
   
  "forge": "./forge.config.js"
}

1. 创建一个名为forge.config.js的文件，放置在项目的根目录下。这个文件将包含具体的 Electron-forge 配置。
2. 在forge.config.js文件中，可以配置packagerConfig和makers两个字段。

forge.config.js 文件配置如下：（直接 复制/粘贴 即可）

module.exports = {
   
   
  "packagerConfig": {
   
   },
  "makers": [
    {
   
   
      "name": "@electron-forge/maker-squirrel",
      "config": {
   
   
        "name": "electron_quick_start"
      }
    },
    {
   
   
      "name": "@electron-forge/maker-zip",
      "platforms": [
        "darwin"
      ]
    },
    {
   
   
      "name": "@electron-forge/maker-deb",
      "config": {
   
   }
    },
    {
   
   
      "name": "@electron-forge/maker-rpm",
      "config": {
   
   }
    }
  ]
}

如果大家还有其他的场景需要配置，可以再从 packagerConfig 和 makers 入手。

packagerConfig

packagerConfig字段用于配置打包器的选项。可以在其中指定一些自定义的打包参数，例如输出目录、应用名称、图标等。根据需求，对该字段进行相应的配置（下面是一些常用的配置）。

packagerConfig: {
   
   
  // 基础配置（一般这些就够用了）
  "name": "MyElectronApp", // 应用程序的名称
  "productName": "My Electron App", // 产品名称（用于生成安装包的名称）
  "icon": "path/to/icon.png", // 应用程序的图标路径
  "out": "build/", // 输出目录的路径
  "overwrite": true, // 是否覆盖已存在的打包文件
  "asar": true, // 是否使用asar打包格式
  "version": "1.0.0", // 应用程序版本号
  "copyright": "Copyright © 2023", // 版权信息
  "ignore": [ // 不需要打包的文件和文件夹的路径列表
    ".git",
    ".vscode",
    "node_modules/.cache",
    "src"
  ],
  // 配置其他构建器（特殊情况下使用）
  "win": {
   
    // Windows平台的配置
    "target": "nsis", // 打包的目标格式为NSIS安装程序
    "icon": "path/to/windows/icon.ico", // Windows平台的图标路径
    "publisherName": "My Company", // 发布者名称
    "fileAssociations": [ // 关联文件类型的配置
      {
   
   
        "ext": "myext", // 文件扩展名
        "name": "My Extension", // 文件类型名称
        "description": "Open My Extension files", // 文件类型描述
        "role": "Editor" // 文件类型的角色
      }
    ],
    "certificateFile": "path/to/certificate.pfx", // 数字证书文件的路径
    "certificatePassword": "password123" // 数字证书的密码
  },
  "mac": {
   
    // macOS平台的配置
    "target": "dmg", // 打包的目标格式为DMG镜像
    "icon": "path/to/mac/icon.icns", // macOS平台的图标路径
    "category": "public.app-category.utilities", // 应用程序的分类
    "extendInfo": {
   
    // 扩展应用程序包的配置
      "NSAppTransportSecurity": {
   
   
        "NSAllowsArbitraryLoads": true // 允许应用程序加载任意的网络资源
      }
    }
  },
  "linux": {
   
    // Linux平台的配置
    "target": "deb", // 打包的目标格式为DEB包
    "icon": "path/to/linux/icon.png", // Linux平台的图标路径
    "category": "Utility", // 应用程序的分类
    "description": "My Electron App", // 应用程序的描述
    "desktop": {
   
    // 创建桌面快捷方式的配置
      "Name": "My Electron App", // 快捷方式的名称
      "Comment": "My Electron App", // 快捷方式的注释
      "Exec": "./MyElectronApp", // 快捷方式的执行命令
      "Terminal": false // 是否在终端中打开应用程序
    }
  }
}

makers

makers字段用于指定不同平台的打包格式。每个打包格式都对应一个maker，定义了如何生成特定格式的安装包。可以根据需要添加或修改makers字段的配置。以下是常见的几种打包格式及其相应的maker配置：

• Windows的.exe安装包：使用@electron-forge/maker-squirrel作为maker，可以配置应用名称等参数。
• macOS的.dmg安装包：使用@electron-forge/maker-zip作为maker，指定platforms为darwin。
• Debian Linux的.deb安装包：使用@electron-forge/maker-deb作为maker，可以配置其他参数。
• Red Hat Linux的.rpm安装包：使用@electron-forge/maker-rpm作为maker，可以配置其他参数。

根据目标平台的需求，进行相应的配置。

完成以上配置后，就可以使用Electron-forge生成针对不同平台的安装包了。通过修改makers字段的配置，可以灵活地定制生成的应用格式。在文章的后续部分将详细介绍如何执行打包命令以及生成不同平台的应用格式的步骤。

2. 应用打包

在这一部分中，我们使用 Electron-forge 将应用程序打包成针对不同平台的安装包。

2.1 生成分发包

使用以下命令进行打包：

npm run make

你可以使用以下选项来指定目标系统架构、运行平台和目标文件：

• -a, --arch [arch]：目标系统架构，默认为x64
• -p, --platform [platform]：运行平台，默认为当前系统编译环境
• --targets [targets]：与maker的作用一样，建议在文件中配置，便于管理

执行完make命令后，在根目录下将生成一个out文件夹。out/make文件夹中包含了打包后的应用分发包。

2.2 创建Windows的EXE文件

使用以下命令生成Windows的应用包：

npm run package

你可以使用以下选项来指定目标系统架构和运行平台：

• -a, --arch [arch]：目标系统架构，默认为x64
• -p, --platform [platform]：运行平台，默认为当前系统编译环境

执行完命令后，将会在当前目录生成一个文件夹，其中包含Windows应用程序的安装包。你可以直接点击该文件夹中的.exe文件来打开应用程序。

2.3 创建Mac的DMG文件

以下是生成Mac的DMG文件的步骤：

1. 安装appdmg工具，建议全局安装：

npm install -g appdmg

1. 创建appdmg.json文件，内容如下：

{
   
   
  "title": "myapp",
  "contents": [
    {
   
    "x": 380, "y": 170, "type": "link", "path": "/Applications" },
    {
   
    "x": 200, "y": 170, "type": "file", "path": "./../out/electron-quick-start-darwin-x64/electron-quick-start.app" }
  ],
  "window": {
   
   
    "size": {
   
    "width": 580, "height": 360 }
  },
  "format": "UDBZ"
}

1. 生成DMG文件：

appdmg ./build/appdmg.json ~/Desktop/test.dmg

按照以上步骤，你就可以简单地实现Electron打包并生成Mac的DMG文件和Windows的EXE文件。

3. 应用打包失败

如果你按照上述步骤操作后仍然遇到问题，可能很难定位错误。这时你可以参考我的GitHub electron-builder仓库代码进行调试，该仓库代码已经经过调试，没有问题。

请执行以下步骤：

第一步：下载安装

# 克隆该仓库
git clone https://github.com/ghSailing/electron-builder.git
# 进入仓库目录
cd electron-builder
# 安装依赖
npm install
# 运行应用
npm start

第二步：生成分发包

# 生成分发包
npm run make

第三步：构建 Windows 的 EXE 文件

# 构建Windows的EXE文件
npm run package

第四步：构建 Mac 的 DMG 文件

# 构建Mac的DMG文件
npm run dmg

请注意，构建 DMG 文件需要在 Mac 电脑上进行。

4. 应用签名

在打包过程中，你可能会遇到应用签名的需求。具体的应用签名流程请参考Code Signing。

以上是关于使用 Electron 生成安装包并打包为不同平台应用格式的介绍。通过本文的指导，你可以轻松地使用 Electron-forge 工具完成应用打包，并生成适用于 Mac 的 DMG 文件和 Windows 的 EXE 文件。同时，如果遇到问题，你还可以参考 GitHub electron-builder 项目进行故障排除。

结语

希望本文对你在 Electron 应用程序的打包和分发过程中有所帮助，让你能够顺利完成任务。

感谢阅读本文，希望你能从中获取到有价值的信息。如果对你有所帮助，请点击 「点赞」 按钮以示支持，并 关注 我的主页获取更多有关 Electron 开发的文章。