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

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

​​Electron教程（一）什么是 Electron，由来、适用场景 和 Electron 的环境搭建​​​​Electron教程（二）启动过程：主进程，渲染进程是什么​​​​Electron教程（三）如何打包 electron 程序：electron-forge 的使用教程​​​​Electron教程（四）使用 Vue Browser 版，创建小工具应用​​​​Electron教程（五）读取本地文件内容， icpMain icpRenderer 之间的交互​​​​Electron教程（六）应用菜单设置例子​​​​Electron教程（七）结语​​

一、安装 ​​electron-forge​​ 是干嘛的

​​electron-forge​​​ 可以自动检测你的系统，然后打包成对应的可执行文件。
它可以实现 ​​​package​​​ 成最终可用的独立项目文件夹，
还可以 ​​​make​​​ 成能够安装的 ​​zip​​ 包

二、安装 ​​electron-forge​​

还是按之前​​教程（1）​​的目录结构开始

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

npm i -D @electron-forge/cli

也可以直接在 ​​package.json​​​ 中添加，然后再运行 ​​npm i​​​ 或 ​​yarn​​ 这两种方式是等价的，我一般习惯后者

"devDependencies": {
    "electron": "^13.1.7",
    "@electron-forge/cli": "^6.0.0-beta.58"
  }

三、初始化 electron-forge

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

npx electron-forge import

运行成功

来看下 ​​package.json​​ 的变化

之前的 ​​package.json​​

{
  "name": "electron-demo",
  "version": "0.1.0",
  "private": true,
  "author": {
    "name": "KyleBing",
    "email": "kylebing@163.com"
  },
  "description": "demo-electron",
  "main": "app.js",
  "scripts": {
    "start": "electron ."
  },
  "devDependencies": {
    "electron": "^13.1.7"
  }
}

之后的 ​​package.json​​

{
  "name": "electron-demo",
  "version": "0.1.0",
  "private": true,
  "author": {
    "name": "KyleBing",
    "email": "kylebing@163.com"
  },
  "description": "demo-electron",
  "main": "app.js",
  "scripts": {
    "start": "electron-forge start",
    "package": "electron-forge package",
    "make": "electron-forge make"
  },
  "devDependencies": {
    "@electron-forge/cli": "^6.0.0-beta.58",
    "@electron-forge/maker-deb": "^6.0.0-beta.58",
    "@electron-forge/maker-rpm": "^6.0.0-beta.58",
    "@electron-forge/maker-squirrel": "^6.0.0-beta.58",
    "@electron-forge/maker-zip": "^6.0.0-beta.58",
    "electron": "^13.1.7"
  },
  "dependencies": {
    "electron-squirrel-startup": "^1.0.0"
  },
  "config": {
    "forge": {
      "packagerConfig": {},
      "makers": [
        {
          "name": "@electron-forge/maker-squirrel",
          "config": {
            "name": "electron_demo"
          }
        },
        {
          "name": "@electron-forge/maker-zip",
          "platforms": [
            "darwin"
          ]
        },
        {
          "name": "@electron-forge/maker-deb",
          "config": {}
        },
        {
          "name": "@electron-forge/maker-rpm",
          "config": {}
        }
      ]
    }
  }
}

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

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

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

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

1. pacakge

npm run package

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

2. make

npm run make

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

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

刚开始我以为可以一次性打包生成不同系统的可执行文件，后来才知道这是不可能的。
只能在对应平台中打开源项目，然后生成对应平台可用的可执行文件。
比如你需要生成 macOS 的可执行文件，就只能去 macOS 中生成，并且不同芯片架构的也不同，比如 Interl 处理器的和 M1 处理器的就不同。

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

"config": {
    "forge": {
      "packagerConfig": {
        "appVersion": "1.1.3",
        "name": "五笔助手",
        "appCopyright": "KyleBing(kylebing@163.com)",
        "icon": "./assets/img/appIcon/appicon",
        "win32metadata": {
          "ProductName": "五笔助手 Windows",
          "CompanyName": "kylebing.cn",
          "FileDescription": "五笔助手 for 小狼毫"
        }
      },
      "makers": [
        {
          "name": "@electron-forge/maker-squirrel",
          "config": {
            "name": "electron_demo"
          }
        },
        {
          "name": "@electron-forge/maker-zip",
          "platforms": [
            "darwin"
          ]
        },
        {
          "name": "@electron-forge/maker-deb",
          "config": {}
        },
        {
          "name": "@electron-forge/maker-rpm",
          "config": {}
        }
      ]
    }
  }

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 通用

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

​​icon​​​ 指定软件的图标，就是显示在桌面或者应用列表中的图标
Windows 需要放一个多尺寸的 ​​​.ico​​​ 图标文件，推荐使用 ​​Greenfish Icon Editor Pro​​​ 来制作
macOS 同样需要放一个多尺寸的 ​​​.icns​​ 图标文件，如下

在任务栏中是这样

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

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

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

macOS 下是这样的