Verpacken Ihrer Electron-App für die Bereitstellung

In diesem Handbuch erfahren Sie, wie Sie ein MSIX-Paket zum Verteilen Ihrer Electron-App mit Windows-APIs erstellen.

Voraussetzungen

Stellen Sie vor dem Verpacken sicher, dass Sie Folgendes haben:

Einrichtung der Entwicklungsumgebung abgeschlossen
[OPTIONAL] Erstellt und getestet Ihr Addon (z. B. Phi-Silikat-Addon oder WinML-Addon)
Überprüfen Sie, ob Ihre App ordnungsgemäß ausgeführt wird npm start

Vorbereiten der Verpackung

Konfigurieren Sie Electron Forge, um temporäre Dateien aus dem endgültigen Build auszuschließen. Fügen Sie Ihrem ignore in packagerConfig ein forge.config.js-Array hinzu.

module.exports = {
  packagerConfig: {
    asar: true,
    ignore: [
      /^\/\.winapp($|\/)/,     // SDK packages and headers
      /^\/winapp\.yaml$/,       // SDK config
      /\.pfx$/,                 // Certificate files
      /\.pdb$/,                 // Debug symbols
      /\/obj($|\/)/,            // C# build artifacts
      /\/bin($|\/)/,            // C# build artifacts
      /\.msix$/                 // MSIX packages
    ]
  },
  // ... rest of your config
};

Wichtig

Stellen Sie sicher, dass Ihre Package.appxmanifest Paket-App-Struktur entspricht:

Das Executable Attribut sollte auf die richtige .exe Datei in der verpackten Ausgabe verweisen.

Generieren eines Entwicklungszertifikats

Generieren Sie vor dem Erstellen eines signierten MSIX-Pakets ein Entwicklungszertifikat:

npx winapp cert generate

Dadurch wird eine devcert.pfx Datei im Projektstamm erstellt, die zum Signieren des MSIX-Pakets verwendet wird.

Verpackungsoptionen

Sie haben zwei Optionen zum Erstellen eines MSIX-Pakets für Ihre Electron-App:

Option 1: Direkte Verwendung der winapp CLI – Konfigurierbarer, funktioniert mit jedem Packager
Option 2: Verwenden von Electron Forge MSIX Maker - Mehr in den Forge-Workflow integriert

Wählen Sie die Option aus, die am besten zu Ihrem Workflow passt.

Option 1: Direkte Verwendung der winapp CLI (empfohlen für Flexibilität)

Dieser Ansatz bietet Ihnen mehr Kontrolle über den Verpackungsprozess und arbeitet mit jedem Electron-Paketer.

Erstellen Ihrer Elektronen-App

Um Ihre Electron-App mit MSIX zu verpacken, müssen wir zuerst das Produktionslayout erstellen. Mit Electron Forge können wir den Paketbefehl verwenden:

# Package with Electron Forge (or your preferred packager)
npx electron-forge package

Dadurch wird eine Produktionsversion Ihrer App im ./out/ Ordner erstellt. Der genaue Ordnername hängt von Ihrem App-Namen und ihrer Architektur ab (z. B my-windows-app-win32-x64. ).

Erstellen des MSIX-Pakets

Verwenden Sie nun die winapp CLI, um ein MSIX-Paket aus Ihrer verpackten App zu erstellen und zu signieren:

npx winapp pack .\out\<your-app-folder> --output .\out --cert .\devcert.pfx --manifest .\Package.appxmanifest

Ersetzen Sie <your-app-folder> durch den tatsächlichen Ordnernamen, my-windows-app-win32-x64 der von Electron Forge erstellt wurde (z. B. für x64 oder my-windows-app-win32-arm64 für ARM64).

Die --manifest Option ist optional. Wenn dies nicht angegeben ist, wird im gepackten Ordner oder im aktuellen Verzeichnis nach "Package.appxmanifest" gesucht.

Die --cert Option ist ebenfalls optional. Wenn nicht angegeben, wird das MSIX nicht signiert.

Die --output Option ist ebenfalls optional. Wenn nicht angegeben, wird das aktuelle Verzeichnis verwendet.

Das MSIX-Paket wird als ./out/<your-app-name>.msix.

Tipp

Sie können Ihren package.json Skripts diese Befehle zur Vereinfachung hinzufügen:

{
  "scripts": {
    "package-msix": "npm run build-csAddon && npx electron-forge package && npx winapp pack ./out/my-windows-app-win32-x64 --output ./out --cert ./devcert.pfx --manifest Package.appxmanifest"
  }
}

Aktualisieren Sie einfach den Pfad so, dass er dem tatsächlichen Namen des Ausgabeordners entspricht.

Option 2: Verwenden von Electron Forge MSIX Maker (für Forge-Benutzer)

Wenn Sie bereits Electron Forge verwenden, können Sie MSIX-Verpackungen direkt in den Forge-Workflow integrieren, indem Sie den @electron-forge/maker-msix Maker verwenden.

Installieren von MSIX Maker

npm install --save-dev @electron-forge/maker-msix

Konfigurieren von forge.config.js

Fügen Sie den MSIX-Maker zu Ihrem forge.config.js hinzu.

module.exports = {
  // ... other config
  makers: [
    {
      name: '@electron-forge/maker-msix',
      config: {
        appManifest: '.\\Package.appxmanifest',
        windowsSignOptions: {
          certificateFile: '.\\devcert.pfx',
          certificatePassword: 'password'
        }
      }
    }
  ],
  // ... rest of your config
};

Aktualisieren von Package.appxmanifest

Der Electron Forge MSIX Maker verwendet ein anderes Ordnerlayout als der winapp CLI-Ansatz. Es platziert Ihre App in einem app\ Ordner im MSIX. Dieser Ordner wird während der Verpackung automatisch erstellt – Sie müssen ihn nicht selbst erstellen. Aktualisieren Sie den Executable Pfad in Ihrem Package.appxmanifest Ordner, um auf den app Ordner zu verweisen:

<Applications>
  <Application Id="myApp"
    Executable="app\my-app.exe"
    EntryPoint="Windows.FullTrustApplication">
    <!-- ... rest of your application config -->
  </Application>
</Applications>

Ersetzen Sie my-app.exe durch den tatsächlichen Namen der ausführbaren Datei. Dies basiert auf dem productName Feld (oder name) in Ihrem package.json.

Hinweis

Der Forge MSIX Maker sucht nach Windows SDK-Tools, die auf dem MinVersion in Ihrem Package.appxmanifest basieren. Wenn Sie eine Fehlermeldung darüber erhalten, dass WindowsKit nicht gefunden wird, stellen Sie sicher, dass die angegebene MinVersion SDK-Version auf Ihrem Computer installiert ist, oder aktualisieren Sie das Update MinVersion , um einer installierten SDK-Version zu entsprechen.

Erstellen des MSIX-Pakets

Jetzt können Sie das MSIX-Paket erstellen. Verwenden Sie die --targets Kennzeichnung, um nur den MSIX Maker auszuführen (andernfalls führt Forge alle konfigurierten Hersteller aus):

npx electron-forge make --targets @electron-forge/maker-msix

Das MSIX-Paket wird im ./out/make/msix/<arch>/ Ordner erstellt (z. B ./out/make/msix/arm64/ . oder ./out/make/msix/x64/).

Tipp

Dieser Ansatz ist stärker in den Electron Forge-Workflow integriert und verarbeitet automatisch Verpackungen und MSIX-Erstellung in einem Schritt.

Installieren und Testen von MSIX

Installieren Sie zunächst das Entwicklungszertifikat (einmaliges Setup):

# Run as Administrator:
npx winapp cert install .\devcert.pfx

Installieren Sie nun das MSIX-Paket. Doppelklicken Sie auf die Msix-Datei, oder führen Sie den folgenden Befehl aus:

# Option 1 output:
Add-AppxPackage .\out\<your-app-name>.msix

# Option 2 output:
Add-AppxPackage .\out\make\msix\<arch>\<your-app-name>.msix

Ersetzen <your-app-name><arch> durch die tatsächlichen Werte aus der Buildausgabe.

Ihre App wird im Startmenü angezeigt! Starten Sie sie, und testen Sie Ihre Windows-API-Features.

Verteilungsoptionen

Sobald Sie über ein funktionierendes MSIX-Paket verfügen, haben Sie mehrere Optionen zum Verteilen Ihrer App:

Direkter Download

Hosten Sie das MSIX-Paket auf Ihrer Website für den direkten Download. Stellen Sie sicher, dass Sie es mit einem Codesignaturzertifikat von einer vertrauenswürdigen Zertifizierungsstelle signieren, damit Benutzer es ohne Sicherheitswarnungen installieren können.

Microsoft Store

Übermitteln Sie Ihre App an die Microsoft Store für die breiteste Verteilung und automatische Updates. Sie müssen Folgendes tun:

Erstellen eines Microsoft Partner Center Kontos
Reservieren Sie Ihren App-Namen
Aktualisieren Sie Package.appxmanifest mit Ihrer Store-Identität. Das msix muss nicht signiert werden, da der Store-Publishing-Prozess es automatisch signiert.
Zur Zertifizierung einreichen

Weitere Informationen: Publishen Sie Ihre App mit dem Microsoft Store

Unternehmensverteilung

Direktes Verteilen an Unternehmenskunden über:

Unternehmensportal – Für Organisationen, die Intune verwenden
Direkter Download - Hosten Sie die MSIX auf Ihrer Website
Querladen – Installieren über PowerShell oder App Installer

Weitere Informationen: Verteilen von Apps außerhalb des Store

App-Installer

Erstellen sie eine .appinstaller Datei für automatische Updates:

<?xml version="1.0" encoding="utf-8"?>
<AppInstaller
    Uri="https://your-domain.com/packages/myapp.appinstaller"
    Version="1.0.0.0"
    xmlns="http://schemas.microsoft.com/appx/appinstaller/2017/2">
    <MainPackage
        Name="YourAppName"
        Version="1.0.0.0"
        Publisher="CN=YourPublisher"
        Uri="https://your-domain.com/packages/myapp.msix"
        ProcessorArchitecture="x64" />
    <UpdateSettings>
        <OnLaunch HoursBetweenUpdateChecks="24" />
    </UpdateSettings>
</AppInstaller>

Weitere Informationen: Übersicht über die App-Installer-Datei

Nächste Schritte

Herzlichen Glückwunsch! Sie haben Ihre Windows-fähige Electron-App erfolgreich für die Verteilung verpackt! 🎉

Zusätzliche Ressourcen

winapp CLI-Dokumentation - Vollständige CLI-Referenz
Sample Electron App – Vollständiges Arbeitsbeispiel
MSIX Packaging Documentation - Weitere Informationen zu MSIX
Windows-App Zertifizierungskit – Testen Der App vor der Store-Übermittlung

Zurück zur Übersicht

Übersicht über erste Schritte – Zurück zum Hauptleitfaden
Einrichten der Entwicklungsumgebung – Überprüfen der Einrichtungsschritte
Erstellen eines Phi-Silica-Addons - Überprüfung der Addon-Erstellung
Erstellen eines WinML-Add-Ons – Informationen zur WinML-Integration

Hilfe

Ein Fehler gefunden?Ein Problem melden

Viel Spaß beim Verteilen! 🚀

Feedback

War diese Seite hilfreich?

Last updated on 2026-05-12