开发 electron 客户端程序, 打包是绕不开的问题. 下面就我在工作中的经验以及目前对 electron-builder 的了解来分享一些心得.
基本概念
官网 https://www.electron.build/ 的定义
A complete solution to package and build a ready for distribution Electron App for macOS, Windows and Linux with "auto update" support out of the box.
关于 electron 和 electron-builder 的基础部分这篇文章就跳过了, 有兴趣的话可以看这篇文章
如何使用
builder 的使用和配置都是很简单的 builder 配置有两种方式
package.JSON 中直接配置使用 (比较常用, 我们下面着重来讲这个)
指定
electron-builder.YAML
文件
demo 地址会在文章末尾给出 (demo 项目中 electron 使用得是 V2.0.7 版本, 目前更高得是 2.0.8 版本).
下面是一个简单的 package.JSON 中带注释的配置
基础配置
- "build": { // 这里是 electron-builder 的配置
- "productName":"xxxx",// 项目名 这也是生成的 exe 文件的前缀名
- "appId": "com.xxx.xxxxx",// 包名
- "copyright":"xxxx",// 版权 信息
- "directories": { // 输出文件夹
- "output": "build"
- },
- // Windows 相关的配置
- "win": {
- "icon": "xxx/icon.ico"// 图标路径
- }
- }
在配置文件中加入以上的文件之后就可以打包出来简单的文件夹, 文件夹肯定不是我们想要的东西. 下一步我们来继续讲别的配置. 2. 打包目标配置 要打包成安装程序的话我们有两种方式,
使用 NSIS 工具对我们的文件夹再进行一次打包, 打包成 exe
通过 electron-builder 的 nsis 直接打包成 exe, 配置如下
- "win": { // 更改 build 下选项
- "icon": "build/icons/aims.ico",
- "target": [
- {
- "target": "nsis" // 我们要的目标安装包
- }
- ]
- },
其他平台配置
- "dmg": { // macOSdmg
- "contents": [
- ...
- ]
- },
- "mac": { // Mac
- "icon": "build/icons/icon.icns"
- },
- "linux": { // Linux
- "icon": "build/icons"
- }
nsis 配置
这个要详细的讲一下, 这个 nsis 的配置指的是安装过程的配置, 其实还是很重要的, 如果不配置 nsis 那么应用程序就会自动的安装在 C 盘. 没有用户选择的余地, 这样肯定是不行的
关于 nsis 的配置是在 build 中 nsis 这个选项中进行配置, 下面是部分 nsis 配置
- "nsis": {
- "oneClick": false, // 是否一键安装
- "allowElevation": true, // 允许请求提升. 如果为 false, 则用户必须使用提升的权限重新启动安装程序.
- "allowToChangeInstallationDirectory": true, // 允许修改安装目录
- "installerIcon": "./build/icons/aaa.ico",// 安装图标
- "uninstallerIcon": "./build/icons/bbb.ico",// 卸载图标
- "installerHeaderIcon": "./build/icons/aaa.ico", // 安装时头部图标
- "createDesktopShortcut": true, // 创建桌面图标
- "createStartMenuShortcut": true,// 创建开始菜单图标
- "shortcutName": "xxxx", // 图标名称
- "include": "build/script/installer.nsh", // 包含的自定义 nsis 脚本 这个对于构建需求严格得安装过程相当有用.
- "script" : "build/script/installer.nsh" // NSIS 脚本的路径, 用于自定义安装程序. 默认为 build / installer.nsi
- },
关于 include 和 script 到底选择哪一个 ?
在对个性化安装过程需求并不复杂, 只是需要修改一下安装位置, 卸载提示等等的简单操作建议使用 include 配置, 如果你需要炫酷的安装过程, 建议使用 script 进行完全自定义.
NSIS 对于处理安装包这种东西, 功能非常的强大. 但是学习起来并不比一门高级语言要容易. 其中的奥秘还要各位大佬自行探索
这里上一些学习资源
NSIS 初级篇
NSIS 打包脚本基础 http://www.cnblogs.com/jingmoxukong/p/5033622.html
示例脚本
NSIS 论坛 http://www.nsisfans.com/forum-2-1.html
关于操作系统的配置
主要是 Windows 中 64 和 32 位的配置
CLI 参数
- electron-builder --ia32 // 32 位
- electron-builder // 64 位 (默认)
nsis 中配置
- "win": {
- "icon": "build/icons/aims.ico",
- "target": [
- {
- "target": "nsis",
- "arch": [ // 这个意思是打出来 32 bit + 64 bit 的包, 但是要注意: 这样打包出来的安装包体积比较大, 所以建议直接打 32 的安装包.
- "x64",
- "ia32"
- ]
- }
- ]
- }
更新配置
下面这个是给更新用的配置, 主要是为了生成 lastest.YAML 配置文件
- "publish": [
- {
- "provider": "generic", // 服务器提供商 也可以是 GitHub 等等
- "url": "http://xxxxx/" // 服务器地址
- }
- ],
完整配置
基本上可用的完整的配置
- "build": {
- "productName":"xxxx",// 项目名 这也是生成的 exe 文件的前缀名
- "appId": "com.leon.xxxxx",// 包名
- "copyright":"xxxx",// 版权 信息
- "directories": { // 输出文件夹
- "output": "build"
- },
- "nsis": {
- "oneClick": false, // 是否一键安装
- "allowElevation": true, // 允许请求提升. 如果为 false, 则用户必须使用提升的权限重新启动安装程序.
- "allowToChangeInstallationDirectory": true, // 允许修改安装目录
- "installerIcon": "./build/icons/aaa.ico",// 安装图标
- "uninstallerIcon": "./build/icons/bbb.ico",// 卸载图标
- "installerHeaderIcon": "./build/icons/aaa.ico", // 安装时头部图标
- "createDesktopShortcut": true, // 创建桌面图标
- "createStartMenuShortcut": true,// 创建开始菜单图标
- "shortcutName": "xxxx", // 图标名称
- "include": "build/script/installer.nsh", // 包含的自定义 nsis 脚本
- },
- "publish": [
- {
- "provider": "generic", // 服务器提供商 也可以是 GitHub 等等
- "url": "http://xxxxx/" // 服务器地址
- }
- ],
- "files": [
- "dist/electron/**/*"
- ],
- "dmg": {
- "contents": [
- {
- "x": 410,
- "y": 150,
- "type": "link",
- "path": "/Applications"
- },
- {
- "x": 130,
- "y": 150,
- "type": "file"
- }
- ]
- },
- "mac": {
- "icon": "build/icons/icon.icns"
- },
- "win": {
- "icon": "build/icons/aims.ico",
- "target": [
- {
- "target": "nsis",
- "arch": [
- "ia32"
- ]
- }
- ]
- },
- "linux": {
- "icon": "build/icons"
- }
- }
命令行参数 (CLI)
Commands(命令):
electron-builder build 构建命名 [default]
electron-builder install-App-deps 下载 App 依赖
electron-builder node-gyp-rebuild 重建自己的本机代码
electron-builder create-self-signed-cert 为 Windows 应用程序创建自签名代码签名证书
electron-builder start 使用 electronic-webpack 在开发模式下运行应用程序 (须臾要 electron-webpack 模块支持)
- Building(构建参数):
- --Mac, -m, -o, --macos Build for macOS, [array]
- --Linux, -l Build for Linux [array]
- --win, -w, --Windows Build for Windows [array]
- --x64 Build for x64 (64 位安装包) [boolean]
- --ia32 Build for ia32(32 位安装包) [boolean]
- --armv7l Build for armv7l [boolean]
- --arm64 Build for arm64 [boolean]
- --dir Build unpacked dir. Useful to test. [boolean]
--prepackaged, --pd 预打包应用程序的路径 (以可分发的格式打包)
--projectDir, --project 项目目录的路径. 默认为当前工作目录.
--config, -c 配置文件路径. 默认为 `electron-builder.yml`(或 `js`, 或 `js5`)
Publishing(发布):
--publish, -p 发布到 GitHub Releases [choices: "onTag", "onTagOrDraft", "always", "never", undefined]
Deprecated(废弃):
--draft 请改为在 GitHub 发布选项中设置 releaseType [boolean]
--prerelease 请改为在 GitHub 发布选项中设置 releaseType [boolean]
--platform 目标平台 (请更改为选项 --Mac, --win or --Linux)
[choices: "mac", "win", "linux", "darwin", "win32", "all", undefined]
--arch 目标 arch (请更改为选项 --x64 or --ia32)
[choices: "ia32", "x64", "armv7l", "arm64", "all", undefined]
- Other(其他):
- --help Show help [boolean]
- --version Show version number [boolean]
Examples(例子):
electron-builder -mwl 为 macOS,Windows 和 Linux 构建 (同时构建)
electron-builder --Linux deb tar.xz 为 Linux 构建 deb 和 tar.xz
electron-builder -c.extraMetadata.foo=bar 将 package.JS 属性 `foo` 设置为 `bar`
electron-builder --config.nsis.unicode=false 为 NSIS 配置 unicode 选项
TargetConfiguration(构建目标配置):
target: String - 目标名称, 例如 snap.
arch "x64" | "ia32" | "armv7l" | "arm64"> | "x64" | "ia32" | "armv7l" | "arm64" -arch 支持列表
总结
electron-builder 是一个简单又强大的库. 反正我是很服
Demo 地址
来源: https://juejin.im/post/5bc53aade51d453df0447927