Introduction détaillée au packaging du constructeur d'électrons

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

1. 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.

1. Configuration de la cible de packaging

Pour le packager dans un installateur, nous avons deux manières,

1. Utilisez l'outil NSIS pour empaqueter à nouveau notre dossier et l'empaqueter dans exe

2. 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" // 我们要的目标安装包
      }
    ]
  },

1. Configuration d'autres plateformes

  "dmg": { // macOSdmg
    "contents": [
      ...
    ]
    },
    "mac": {  // mac
      "icon": "build/icons/icon.icns"
    },
    "linux": { // linux
      "icon": "build/icons"
    }

1. 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

Forum NSIS

À propos du fonctionnement Le système la configuration

electron-builder --ia32 // 32位
electron-builder        // 64位(默认)

est principalement la configuration 64 bits et 32 ​​bits dans Windows

Paramètres CLI

"win": {
  "icon": "build/icons/aims.ico",
  "target": [
    {
      "target": "nsis",
      "arch": [ // 这个意思是打出来32 bit + 64 bit的包，但是要注意：这样打包出来的安装包体积比较大，所以建议直接打32的安装包。
        "x64", 
        "ia32"
      ]
    }
  ]
}

1. configuration nsis

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模块支持)

Commandes (Command) :

  --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`)

Bâtiment (Paramètres du bâtiment) :

  --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]

Autre :

  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选项

Exemples :

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 convaincu

Ce 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!