Aktualisierung auf v2

Aktualisieren Sie Projekte, die vor v2 in PWA Kit generiert wurden, um von den Verbesserungen bei Framework und Tools in v2 zu profitieren.

Mit der Aktualisierung werden nicht automatisch neue Storefront-Funktionalitäten aus der Retail React App-Vorlage hinzugefügt, Sie können diese jedoch manuell hinzufügen. Verwenden Sie dazu den aktuellen Code der Retail React App als Referenz.

Wir haben dem PWA Kit v2 viele neue Funktionalitäten hinzugefügt:

🥳 TypeScript-Support. Die Build-Tools unterstützen TypeScript jetzt standardmäßig, ohne dass die Konfigurationsdateien für Babel oder Webpack aktualisiert werden müssen.

🧰 **** Aktualisierter Entwicklungsserver, der Hot Reload auf der Serverseite unterstützt und es ermöglicht, in einer zukünftigen Version Hot Reload auf der Clientseite zu unterstützen.

🤓 Das neue Befehlszeilentool pwa-kit-dev bündelt unsere empfohlenen Entwicklungstools wie Webpack, Babel und Jest zur Unterstützung von Zero-Config-Projektvorlagen.

🖌️ Experimenteller Support für andere Apps als React für Benutzer, die sich für die Nutzung von Managed Runtime zum Hosten anderer auf Express basierender Apps interessieren (nicht nur der Retail React App).

Wenn Sie noch kein PWA Kit-Projekt generiert haben, verwenden Sie die Anleitung Schnellstart, um mit v2 ein neues Projekt zu erzeugen.

Wir haben den Upgrade-Prozess von v1.5 auf v2 so einfach wie möglich gestaltet. Es sind nur für wenige bestehende Projektdateien Änderungen erforderlich.

Wenn Sie ein Upgrade von v1.4 (oder älter) durchführen, ist der Prozess gleich dem des Upgrades von v1.5, jedoch ist ein zusätzlicher Schritt erforderlich. Aktualisieren Sie alle import-Anweisungen in Bezug auf pwa-kit-react-sdk, sodass der Ordner dist/ nicht mehr im Importpfad enthalten ist.

Lesen Sie weiter, um die verbleibenden Upgrade-Aktionen durchzuführen (sowohl für v1.5 als auch für v1.4).

Öffnen Sie zum Starten das Upgrade-Prozesses package.json im Stammverzeichnis Ihres Projekts.

Fügen Sie drei neue pwa-kit-*-Pakete hinzu und installieren Sie diese:

Entfernen Sie die folgenden Abhängigkeiten. Das neue pwa-kit-dev-Tool bearbeitet diese Abhängigkeiten jetzt für Sie. (Wenn die Versionsnummern nicht genau mit den Nummern in Ihrem Projekt übereinstimmen, entfernen Sie sie dennoch.)

Konvertieren Sie diese NPM-Skripts, um das neue pwa-kit-dev zu verwenden:

Öffnen Sie babel.config.js im Stammverzeichnis Ihres Projekts und ersetzen Sie die gesamte Datei durch diese Zeile:

Haben Sie Anpassungen an Ihrer Babel-Konfiguration vorgenommen, fügen Sie sie unter der Anfrage der require()-Funktion hinzu.

Haben Sie die webpack.config.js-Datei im Stammverzeichnis Ihres Projekts nicht individuell angepasst, löschen Sie die Datei. Es wird automatisch eine Standard-Konfigurationsdatei geladen.

Haben Sie Anpassungen für die Datei, müssen Sie zunächst mit der Funktion require() die Grundkonfiguration aufrufen. Dann können Sie Ihre Anpassungen hinzufügen:

Die in v2 zur Erstellung des Express-Servers verwendete Methode wurde geändert. Die Methode createApp gilt jetzt als veraltet und wurde durch eine Methode namens getRuntime ersetzt.

Die Methode getRuntime gibt ein Runtime-Objekt zurück. Mit der Methode createHandler können Sie mit Managed Runtime kompatible Lambda-Handler erstellen. Das zweite Argument ist eine Rückruffunktion, die Ihnen den Zugriff auf die Express-App und damit die Anpassung der Express-App ermöglicht. So können Sie zum Beispiel die Rückruffunktion dazu nutzen, benutzerdefinierte Endpunkte zu implementieren.

In v2 wurde die Bibliothek body-parser aus der Express-App entfernt. Sollten Sie benutzerdefinierte Endpunkte haben, die erfordern, dass req.body analysiert und automatisch ausgefüllt wird, installieren Sie die Bibliothek body-parser, indem Sie npm install body-parser ausführen und die Bibliothek bodyParser in ssr.js einschließen:

Wenn getConfig verwendet wird, importieren Sie die Datei aus dem neuen pwa-kit-runtime-Paket:

Öffnen Sie worker/main.js und fügen Sie diese neue Route hinzu:

In v2 müssen die Proxy-Einstellungen für jede Managed Runtime-Umgebung explizit definiert werden. In v1 gab es einen Fallback-Mechanismus, der es einer Managed Runtime-Umgebung ermöglichte, die gleichen Proxy-Einstellungen wie die lokale Entwicklungsumgebung zu verwenden. Der Fallback-Mechanismus wird für v2-Projekte aufgrund von Leistungs- und Wartungsproblemen nicht unterstützt.

Informationen zur Konfiguration von Proxy-Einstellungen für Managed Runtime-Umgebungen mithilfe des Runtime Admin-Tools oder der Managed Runtime API finden Sie unter Proxy-Anforderungen.

Sie können auch die neue Funktion Umgebungsspezifische Konfigurationen in Version 2 nutzen, um Proxy-Einstellungen für Ihre Managed Runtime-Umgebungen zu konfigurieren.

Vor v2 unterstützte PWA Kit Node 12.x. Bei v2 müssen Sie sicherstellen, dass Ihr Code mit Node 16+ funktioniert.

Sie können testen, ob Ihre Änderungen erfolgreich waren. Führen Sie dazu die folgenden Befehle aus:

  1. npm start, um zu bestätigen, dass die App lokal ausgeführt werden kann.
  2. npm run build, um zu bestätigen, dass der Build-Prozess erfolgreich ist.
  3. npm run push (und über Runtime Admin bereitstellen), um zu bestätigen, dass die Bereitstellung eines Bündels erfolgreich ist.