Detaillierte Einführung in die Verpackung von Elektronenbildnern

Dieser Artikel bietet Ihnen eine detaillierte Einführung in die Verpackung von Elektronenbildnern. Ich hoffe, dass er Ihnen als Referenz dienen wird.

Bei der Entwicklung von Elektronen-Client-Programmen ist die Verpackung ein unvermeidbares Problem. Lassen Sie mich einige Erkenntnisse teilen, die auf meinen Erfahrungen bei der Arbeit und meinem aktuellen Verständnis von electron-builder basieren.

Grundlegende Konzepte

Definition der offiziellen Website

Eine Komplettlösung zum Paketieren und Erstellen einer vertriebsfertigen Electron-App für macOS, Windows und Linux mit „automatischer Aktualisierung“. ”Unterstützung sofort einsatzbereit.

In diesem Artikel werden die grundlegenden Teile von Electron und Electron-Builder übersprungen. Wenn Sie interessiert sind, können Sie diesen Artikel lesen

Wie man es verwendet

Die Verwendung und Konfiguration des Builders ist sehr einfach
Es gibt zwei Möglichkeiten, den Builder zu konfigurieren

Konfigurieren und verwenden Sie ihn direkt in package.json (häufiger verwendet, wir werden uns darauf konzentrieren). unten)

Geben Sie die Datei „electron-builder.yml“ an

Die Demoadresse wird am Ende des Artikels angegeben (electron im Demoprojekt verwendet Version V2.0.7 und derzeit die höhere Version). Version ist Version 2.0.8).

Das Folgende ist eine einfache kommentierte Konfiguration in package.js

1. Grundkonfiguration

"build": {  // 这里是electron-builder的配置
    "productName":"xxxx",//项目名 这也是生成的exe文件的前缀名
    "appId": "com.xxx.xxxxx",//包名  
    "copyright":"xxxx",//版权  信息
    "directories": { // 输出文件夹
      "output": "build"
    }, 
    // windows相关的配置
    "win": {  
      "icon": "xxx/icon.ico"//图标路径 
    }  
  }

in der Konfigurationsdatei Nach dem Hinzufügen Die oben genannten Dateien können Sie in einen einfachen Ordner packen. Der Ordner ist definitiv nicht das, was wir wollen. Als nächstes werden wir weiter über andere Konfigurationen sprechen.

1. Zielkonfiguration packen

Um es in einen Installer zu packen, haben wir zwei Möglichkeiten:

1. Verwenden Sie das NSIS-Tool, um unseren Ordner erneut zu packen und in exe zu packen

2. Packen Sie ihn direkt über nsis von Electron-Builder in exe. Die Konfiguration ist wie folgt

"win": {  // 更改build下选项
    "icon": "build/icons/aims.ico",
    "target": [
      {
        "target": "nsis" // 我们要的目标安装包
      }
    ]
  },

1. Andere Plattformkonfigurationen

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

1. nsis-Konfiguration

Die Konfiguration von nsis bezieht sich auf die Konfiguration des Installationsprozesses. Es ist tatsächlich sehr wichtig, dass die Anwendung automatisch installiert wird das Laufwerk C. Es gibt keinen Spielraum für Benutzer, dies ist definitiv nicht möglich

Die Konfiguration von NSIS wird in der NSIS-Option im Build konfiguriert. Das Folgende ist Teil der NSIS-Konfiguration

"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  
},

Info include undscript Welches soll ich wählen?

Es wird empfohlen, die include-Konfiguration zu verwenden, wenn die Anforderungen für einen personalisierten Installationsprozess nicht kompliziert sind und Sie lediglich den Installationsort, Deinstallationsaufforderungen usw. ändern müssen. Wenn Sie einen coolen Installationsprozess benötigen, Es wird empfohlen, script Vollständig angepasst zu verwenden.

NSISEs ist sehr leistungsfähig für die Verarbeitung von Installationspaketen. Aber es ist nicht einfacher zu lernen als eine Hochsprache. Die Geheimnisse müssen Sie selbst erforschen

Hier sind einige Lernressourcen

• NSIS-Grundlagen

• NSIS-Verpackungsskript-Grundlagen

• Beispielskript

• NSIS-Forum

1. Über den Betrieb Das System Konfiguration

ist hauptsächlich die 64-Bit- und 32-Bit-Konfiguration in Windows

CLI-Parameter

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

nsis-Konfiguration

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

1. Update-Konfiguration

Das Folgende ist die Konfiguration für das Update, hauptsächlich zum Generieren der lastest.yamlKonfigurationsdatei

"publish": [
  {
    "provider": "generic", // 服务器提供商 也可以是GitHub等等
    "url": "http://xxxxx/" // 服务器地址
  }
],

vollständige Konfiguration

Grundsätzlich verfügbare vollständige Konfiguration

"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"
    }
  }

Befehlszeilenparameter (CLI)

Befehle:

  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(Build-Parameter ):

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

Veröffentlichung(Veröffentlichung):

  --publish, -p  发布到GitHub Releases [choices: "onTag", "onTagOrDraft", "always", "never", undefined]

Veraltet (veraltet):< ;/font>

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

Andere(andere):

  --help     Show help                                                 [boolean]
  --version  Show version number                                       [boolean]

Beispiele(Beispiele):

  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(Build-Zielkonfiguration):

target:  String - 目标名称，例如snap.
arch “x64” | “ia32” | “armv7l” | “arm64”> | “x64” | “ia32” | “armv7l” | “arm64”  -arch支持列表

Zusammenfassung

electron-builder ist eine einfache und leistungsstarke Bibliothek. Ich bin jedenfalls sehr überzeugt

Das obige ist der detaillierte Inhalt vonDetaillierte Einführung in die Verpackung von Elektronenbildnern. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!