Electron教程(三)如何打包 electron 程序:electron-forge 的使用教程
Electron教程(一)什么是 Electron,由来、适用场景 和 Electron 的环境搭建
Electron教程(二)启动过程:主进程,渲染进程是什么
Electron教程(三)如何打包 electron 程序:electron-forge 的使用教程
Electron教程(四)使用 Vue Browser 版,创建小工具应用
Electron教程(五)读取本地文件内容, ipcMain ipcRenderer 之间的交互
Electron教程(六)应用菜单设置例子
Electron教程(七)结语
一、安装 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": "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 下是这样的