文章目录
一、electron-packager
electron-packager <sourcedir> <appname> <platform> <architecture> <electron version> <optional options>
参数说明:
- sourcedir:项目所在路径
- appname:应用名称
- platform:确定了你要构建哪个平台的应用(Windows、Mac 还是
Linux)
architecture:决定了使用 x86 还是 x64 还是两个架构都用
electron version:electron 的版本
optional options:可选选项
为了方便起见,在package.json中添加代码:
"scripts": {
"package": "electron-packager ./ myapp --out ./out --version 8.2.0 --overwrite --icon=icon.ico"
}
然后在命令行中执行npm run package
也可以直接在命令行输入electron-packager ./ “myapp” --out ./out --version 8.2.0 --overwrite --icon=icon.ico
打包成功后,会在项目根目录的out目录下生成.exe,运行该文件,并且没有报错,则说明本次打包成功。
特点:
1、支持平台有:Windows (32/64 bit)、OS X (also known as macOS)、Linux (x86/x86_64);
2、进行应用更新时,使用electron内置的autoUpdate进行更新
3、支持CLI和JS API两种使用方式;
其它详见官方文档:electron/electron-packager
二、electron-builder
- 官方地址:electron-builder
- 官方对
electron-builder
的介绍
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.
打包和构建适用于macOS,Windows和Linux的可分发Electron应用程序的完整解决方案,开箱即用。
electron-builder相对electron-packager来说,功能更加丰富,更加强大,不仅支持的平台多,而且更加智能化,可以自动对更新的项目进行打包。最关键的一点就是:更加安全,再也不用担心源码暴露的问题了。
1.electron-builder
的配置
electron-builder
的配置一共有两种方式,直接在package.json
中配置是最常用的
(1)在package.json
中直接配置
直接给出最完整的配置,自取所需哦!(使用时记得去掉注释)
"build": {
"productName":"XXX",//项目名 这也是生成的exe文件的前缀名
"appId": "com.aimooc.xxxxx",//包名
"copyright":"xxxx",//版权 信息
"directories": { // 输出文件夹
"output": "dist" // 默认项目根目录下的dist
},
"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脚本,这个对于构建需求严格得安装过程相当有用。
},
// 更新用的配置,主要是为了生成lastest.yaml配置文件
"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": [ // 打出来32 bit + 64 bit的包(这样的安装包体积较大,建议直接打32的包。
// "x64", // 一般建议去掉
"ia32"
]
}
]
},
"linux": {
"icon": "build/icons"
}
}
nsis配置
nsis配置就是安装过程的配置,对于用户体验来说还是很重要的,不配置的话默认安装在C盘
NSIS 是“Nullsoft 脚本安装系统”(Nullsoft Scriptable Installation System)的缩写,功能非常的强大,但是学习起来并不容易。这里上一些古老的学习资源 :
- 传送门 ==> Electron之自定义安装路径
- 传送门 ==> NSIS安装制作基础教程[初级篇]
- 传送门 ==> NSIS 打包脚本基础
- 传送门 ==> 完美的 NSIS安装脚本
- 传送门 ==> NSIS中文论坛
命令行参数(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支持列表
(2)自定义electron-builder.yml
文件进行配置
三、electron-packager 遇到的问题
。。。electron-packager问题太多,太古板,还有安全问题。。已弃用。。
如有问题可参考如下文章:
- 传送门 ==> 打包应用
四、electron-builder 遇到的问题
1.网络原因
更多内容可参考:
- 传送门 ==>【译】Electron 自动更新的完整教程(Windows 和 OSX)
- 传送门 ==>在windows系统下实现自动更新
- 传送门 ==>使用electron-builder在windows上打包并自动更新