一、安装 electron-forge 是干嘛的

electron-forge 可以自动检测你的系统，然后打包成对应的可执行文件。

它可以实现 package 成最终可用的独立项目文件夹，

还可以 make 成能够安装的 zip 包

二、安装 electron-forge

还是按之前的目录结构开始

添加 electron-forge 开发依赖，你可以使用指令添加

  1. npm i -D @electron-forge/cli

也可以直接在 package.json 中添加，然后再运行 npm i 或 yarn

这两种方式是等价的

  1.   "devDependencies": {
  2.     "electron": "^13.1.7",
  3.     : "^6.0.0-beta.58"
  4.   }

（三）如何打包 electron 程序：electron-forge 的使用教程 - 图1

（三）如何打包 electron 程序：electron-forge 的使用教程 - 图2

三、初始化 electron-forge

electron-forge 在使用之前需要初始化一下，它会自动改变 package 的内容，然后添加几个打包的指令，不需要自己手动添加，很方便

  1. npx electron-forge import

运行成功

（三）如何打包 electron 程序：electron-forge 的使用教程 - 图3

来看下 package.json 的变化

（三）如何打包 electron 程序：electron-forge 的使用教程 - 图4

之前的 package.json

  1. {
  2.   "name": "electron-demo",
  3.   "version": "0.1.0",
  4.   "private": true,
  5.   "author": {
  6.     "name": "KyleBing",
  7.     "email": "kylebing@163.com"
  8.   },
  9.   "description": "demo-electron",
  10.   "main": "app.js",
  11.   "scripts": {
  12.     "start": "electron ."
  13.   },
  14.   "devDependencies": {
  15.     "electron": "^13.1.7"
  16.   }
  17. }

之后的 package.json

  1. {
  2.   "name": "electron-demo",
  3.   "version": "0.1.0",
  4.   "private": true,
  5.   "author": {
  6.     "name": "KyleBing",
  7.     "email": "kylebing@163.com"
  8.   },
  9.   "description": "demo-electron",
  10.   "main": "app.js",
  11.   "scripts": {
  12.     "start": ,
  13.     "package": ,
  14.     "make": 
  15.   },
  16.   "devDependencies": {
  17.     : "^6.0.0-beta.58",
  18.     : "^6.0.0-beta.58",
  19.     : "^6.0.0-beta.58",
  20.     : "^6.0.0-beta.58",
  21.     : "^6.0.0-beta.58",
  22.     "electron": "^13.1.7"
  23.   },
  24.   "dependencies": {
  25.     : "^1.0.0"
  26.   },
  27.   "config": {
  28.     "forge": {
  29.       "packagerConfig": {},
  30.       "makers": [
  31.         {
  32.           "name": ,
  33.           "config": {
  34.             "name": "electron_demo"
  35.           }
  36.         },
  37.         {
  38.           "name": ,
  39.           "platforms": [
  40.             "darwin"
  41.           ]
  42.         },
  43.         {
  44.           "name": ,
  45.           "config": {}
  46.         },
  47.         {
  48.           "name": ,
  49.           "config": {}
  50.         }
  51.       ]
  52.     }
  53.   }
  54. }

四、生成可执行文件夹 和 打包

可以看到在 初始化之后 多出了两个指令，分别对应：

  • 生成可执行文件夹 pacakge
  • 打包 make

在 make 之前，需要先将项目 package，这个在你执行 npm run make 的时候也会提示你

1. pacakge

  1. npm run package

（三）如何打包 electron 程序：electron-forge 的使用教程 - 图5

运行成功后，会输出到项目目录的 out 目录下

（三）如何打包 electron 程序：electron-forge 的使用教程 - 图6

2. make

  1. npm run make

（三）如何打包 electron 程序：electron-forge 的使用教程 - 图7

make 之后会输出到项目目录的 out/make 下

（三）如何打包 electron 程序：electron-forge 的使用教程 - 图8

五、如何打包，生成不同平台的可执行文件

刚开始我以为可以一次性打包生成不同系统的可执行文件，后来才知道这是不可能的。

只能在对应平台中打开源项目，然后生成对应平台可用的可执行文件。

比如你需要生成 macOS 的可执行文件，就只能去 macOS 中生成，并且不同芯片架构的也不同，比如 Interl 处理器的和 M1 处理器的就不同。

1. 相关配置全貌 package.json 的 config

  1.  "config": {
  2.     "forge": {
  3.       "packagerConfig": {
  4.         "appVersion": "1.1.3",
  5.         "name": "五笔助手",
  6.         "appCopyright": "KyleBing(kylebing@163.com)",
  7.         "icon": ,
  8.         "win32metadata": {
  9.           "ProductName": "五笔助手 Windows",
  10.           "CompanyName": "kylebing.cn",
  11.           "FileDescription": "五笔助手 for 小狼毫"
  12.         }
  13.       },
  14.       "makers": [
  15.         {
  16.           "name": ,
  17.           "config": {
  18.             "name": "electron_demo"
  19.           }
  20.         },
  21.         {
  22.           "name": ,
  23.           "platforms": [
  24.             "darwin"
  25.           ]
  26.         },
  27.         {
  28.           "name": ,
  29.           "config": {}
  30.         },
  31.         {
  32.           "name": ,
  33.           "config": {}
  34.         }
  35.       ]
  36.     }
  37.   }

2. packagerConfig 定义生成可执行文件的一些参数

packgerConfig 中定义的是生成的可执行文件的 icon 、名字、关于信息等，packgerConfig 是另一个插件 electron-packger 使用的配置，其官方的具体配置说明如下：

electron-forge 官方对应 packgerConfig 的说明： https://electron.github.io/electron-packager/main/interfaces/electronpackager.options.html
electron-packger 官方配置参数说明： https://electron.github.io/electron-packager/main/interfaces/electronpackager.options.html

外层是通用的，各平台 macOS Windows Linux 通用

  1.  "appVersion": "1.1.3", // 软件版本号
  2.  "name": "五笔助手", // 软件名字
  3.  "appCopyright": "KyleBing(kylebing@163.com)", // 作者信息
  4.  "icon": , // 对应的图标

icon 指定软件的图标，就是显示在桌面或者应用列表中的图标

Windows 需要放一个多尺寸的 .ico 图标文件，推荐使用 Greenfish Icon Editor Pro 来制作

macOS 同样需要放一个多尺寸的 .icns 图标文件，如下

（三）如何打包 electron 程序：electron-forge 的使用教程 - 图9

（三）如何打包 electron 程序：electron-forge 的使用教程 - 图10

在任务栏中是这样

（三）如何打包 electron 程序：electron-forge 的使用教程 - 图11

3. packgerConfig.win32metadata Windows 特有的一些字段配置

packgerConfig 中还有 Windows 特有的一些字段需要配置，放在 packgerConfig.win32metadata 中，对应 【关于】菜单中的一些信息

  1. "ProductName": "五笔助手 Windows",
  2. "CompanyName": "kylebing.cn",
  3. "FileDescription": "五笔助手 for 小狼毫"

（三）如何打包 electron 程序：electron-forge 的使用教程 - 图12

macOS 下是这样的

（三）如何打包 electron 程序：electron-forge 的使用教程 - 图13

例子

https://github.com/KyleBing/wubi-dict-editor