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:

Haben Sie Anpassungen an der ssr.js-Datei im app-Verzeichnis vorgenommen, benennen Sie die Datei zu ssr.backup.js um, damit Sie Ihre Anpassungen beibehalten können.

Laden Sie die neue Version von ssr.js von GitHub herunter und kopieren Sie sie in das app-Verzeichnis Ihres Projekts. Haben Sie keine Anpassungen, überschreiben Sie die bestehende Datei.

Wenn Sie Anpassungen haben, öffnen Sie ssr.js und ssr.backup.js und integrieren Sie Ihre Anpassungen ssr.backup.js in ssr.js.

Verwenden Sie den folgenden Codeblock als eine Anleitung für die Integration Ihrer Anpassungen:

Verwenden Sie immer die CommonJS-Modulsyntax (require, module.exports) in ssr.js sowie in allen Dateien, die von ssr.js importiert werden.

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