Cet article vous apporte une introduction détaillée à l'emballage des constructeurs d'électrons. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.
Lors du développement de programmes clients électroniques, le packaging est un problème inévitable. Permettez-moi de partager quelques idées basées sur mon expérience professionnelle et ma compréhension actuelle de electron-builder.
Concepts de base
Définition du site officiel
Une solution complète pour empaqueter et créer une application Electron prête à être distribuée pour macOS, Windows et Linux avec « mise à jour automatique " support prêt à l'emploi.Cet article ignorera les parties de base d'électron et d'électron-builder Si vous êtes intéressé, vous pouvez lire cet article
Comment l'utiliser.
L'utilisation et la configuration du builder sont très simples
Il existe deux manières de configurer le builder
Le configurer et l'utiliser directement dans package.json (plus couramment utilisé, nous nous concentrerons sur cela ci-dessous)
Spécifiez le fichier electronic-builder.yml
L'adresse de la démo sera donnée à la fin de l'article (electron dans le projet de démonstration utilise la version V2.0.7, et actuellement la version supérieure la version est la version 2.0.8).
Ce qui suit est une configuration simple annotée dans package.js
Configuration de base
"build": { // 这里是electron-builder的配置
"productName":"xxxx",//项目名 这也是生成的exe文件的前缀名
"appId": "com.xxx.xxxxx",//包名
"copyright":"xxxx",//版权 信息
"directories": { // 输出文件夹
"output": "build"
},
// windows相关的配置
"win": {
"icon": "xxx/icon.ico"//图标路径
}
}Dans la configuration Après en ajoutant les fichiers ci-dessus au fichier, vous pouvez le regrouper dans un simple dossier. Le dossier n'est certainement pas ce que nous voulons. Ensuite, nous continuerons à parler d'autres configurations.
Configuration de la cible de packaging
Pour le packager dans un installateur, nous avons deux manières,
Utilisez l'outil NSIS pour empaqueter à nouveau notre dossier et l'empaqueter dans exe
Emballez-le directement dans exe via nsis d'électron-builder La configuration est la suivante.
"win": { // 更改build下选项
"icon": "build/icons/aims.ico",
"target": [
{
"target": "nsis" // 我们要的目标安装包
}
]
},Configuration d'autres plateformes
"dmg": { // macOSdmg
"contents": [
...
]
},
"mac": { // mac
"icon": "build/icons/icon.icns"
},
"linux": { // linux
"icon": "build/icons"
}configuration nsis
Parlons de cela en détail. La configuration nsis fait référence à la configuration du processus d'installation. En fait, c'est toujours très important si nsis n'est pas configuré. L'application sera automatiquement installée sur le lecteur C. Il n'y a pas de place pour le choix de l'utilisateur, ce n'est certainement pas possible
La configuration de nsis est configurée dans l'option nsis dans le 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脚本 这个对于构建需求严格得安装过程相当有用。
"script" : "build/script/installer.nsh" // NSIS脚本的路径，用于自定义安装程序。 默认为build / installer.nsi
}, A propos deinclude et script Lequel choisir ?
Il est recommandé d'utiliser la configuration include si les exigences d'un processus d'installation personnalisé ne sont pas compliquées et qu'il vous suffit de modifier l'emplacement d'installation, les invites de désinstallation, etc. Si vous avez besoin d'un processus d'installation sympa, il est recommandé d'utiliser script Soyez entièrement personnalisé.
NSISIl est très puissant pour traiter les packages d'installation. Mais ce n’est pas plus facile à apprendre qu’une langue de haut niveau. Les secrets doivent être explorés par vous-même
Voici quelques ressources d'apprentissage
Bases de NSIS
Bases du script d'empaquetage NSIS
Bases du script d'empaquetage NSIS
Exemple de script
À propos du fonctionnement Le système la configuration
electron-builder --ia32 // 32位 electron-builder // 64位(默认)
"win": {
"icon": "build/icons/aims.ico",
"target": [
{
"target": "nsis",
"arch": [ // 这个意思是打出来32 bit + 64 bit的包，但是要注意：这样打包出来的安装包体积比较大，所以建议直接打32的安装包。
"x64",
"ia32"
]
}
]
}Configuration de mise à jourlastest.yaml
"publish": [
{
"provider": "generic", // 服务器提供商 也可以是GitHub等等
"url": "http://xxxxx/" // 服务器地址
}
],Ce qui suit est la configuration à mettre à jour, principalement pour générer le fichier de configuration
Configuration complète
"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"
}
}Configuration complète essentiellement disponible
Paramètres de ligne de commande (CLI)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模块支持)
--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`)
--publish, -p 发布到GitHub Releases [choices: "onTag", "onTagOrDraft", "always", "never", undefined]
Publication (Publication) :
--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]
Obsolète :
--help Show help [boolean] --version Show version number [boolean]
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选项
target: String - 目标名称，例如snap. arch “x64” | “ia32” | “armv7l” | “arm64”> | “x64” | “ia32” | “armv7l” | “arm64” -arch支持列表
TargetConfiguration (configuration de la cible de construction) :
Résuméelectron-builder est une bibliothèque simple et puissante. Quoi qu'il en soit, je suis très convaincuCe qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Comment télécharger et enregistrer les vidéos phares du jour
Comment apprendre la programmation Python à partir de zéro
Utilisation courante de Array.slice
menu contextuel
vim sauvegarder et quitter la commande
diffusion sur iPad
Quels sont les outils de développement ?
Méthode d'optimisation du classement des mots clés Baidu SEO
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
