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

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

一、安装 electron-forge 是干嘛的

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

二、安装 electron-forge

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

添加 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": "" }, "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": "" }, "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 下

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

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

 "config": { 
    "forge": { 
    "packagerConfig": { 
    "appVersion": "1.1.3", "name": "五笔助手", "appCopyright": "KyleBing()", "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 使用的配置，其官方的具体配置说明如下：

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

 "appVersion": "1.1.3", // 软件版本号 "name": "五笔助手", // 软件名字 "appCopyright": "KyleBing()", // 作者信息 "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 小狼毫" 

例子

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