Upgrade auf das modulare Web SDK (v9)

Für Anwendungen, die derzeit das Web SDK Version 8 oder früher verwenden, sollten Sie eine Migration zu Version 9 in Betracht ziehen. Folgen Sie dazu der Anleitung in dieser Anleitung.

In diesem Leitfaden wird davon ausgegangen, dass Sie mit Version 8 vertraut sind und einen Modul-Bundler wie Webpack oder Rollup für das Upgrade und die laufende Entwicklung von Version 9 nutzen.

Die Verwendung eines Module Bundler in Ihrer Entwicklungsumgebung wird dringend empfohlen. Wenn Sie keins verwenden, können Sie nicht von den Hauptvorteilen der verringerten Anwendungsgröße von Version 9 profitieren. Sie benötigen npm oder yarn, um das SDK zu installieren.

Informationen zu kompatiblen Bibliotheken

Für Web SDK Version 9 sind zwei Arten von Bibliotheken verfügbar:

  • Modular: Eine neue API-Oberfläche zur Erleichterung des Tree-Shaking (Entfernen von nicht verwendetem Code) macht Ihre Webanwendung so klein und schnell wie möglich.
  • Compat: Eine vertraute API-Oberfläche, die vollständig mit Version 8 kompatibel ist, sodass Sie ein Upgrade auf Version 9 durchführen können, ohne den gesamten SDK-Code auf einmal ändern zu müssen. Kompatible Bibliotheken haben kaum oder gar keine Größen- oder Leistungsvorteile gegenüber ihren Versionen in Version 8.

In diesem Leitfaden wird davon ausgegangen, dass Sie die kompatiblen Version 9-Bibliotheken nutzen, um das Upgrade zu vereinfachen. Mit diesen Bibliotheken können Sie neben dem für Version 9 refaktorierten Code weiterhin Code der Version 8 verwenden. Das bedeutet, dass Sie Ihre Anwendung im Laufe des Upgradeprozesses leichter kompilieren und debuggen können.

Bei Anwendungen, bei denen das Web SDK sehr wenig gefährdet ist, kann es praktisch sein, den Code der Version 8 ohne die Kompatibilitätsbibliotheken der Version 9 zu refaktorieren. Wenn Sie ein Upgrade für eine solche Anwendung durchführen, können Sie der Anleitung in dieser Anleitung für „modulare Version 9“ folgen, ohne die Compat-Bibliotheken zu verwenden.

Informationen zum Upgradeprozess

Jeder Schritt des Upgradeprozesses ist so konzipiert, dass Sie das Bearbeiten der Quelle für Ihre App abschließen und diese dann kompilieren und ausführen können. So aktualisieren Sie eine App:

  1. Fügen Sie Ihrer App die Bibliotheken der Version 9 und die kompatiblen Bibliotheken hinzu.
  2. Aktualisieren Sie die Importanweisungen im Code auf Version 9-kompatibel.
  3. Code auf den modularen Stil refaktorieren
  4. Entfernen Sie die Authentication-Compat-Bibliothek und den Kompatibilitätscode für die Authentifizierung, um die Vorteile der Anwendungsgröße nutzen zu können.
  5. Initialisierungscode auf modularen Stil aktualisieren.
  6. Entfernen Sie alle verbleibenden Kompatibilitätsanweisungen der Version 9 und den Kompatibilitätscode aus Ihrer App.

Version 9 SDK herunterladen

Laden Sie zuerst die Bibliotheken der Version 9 und die kompatiblen Bibliotheken mithilfe von npm herunter (neueste Version https://www.npmjs.com/package/firebase):

npm i firebase@10.11.1

# OR

yarn add firebase@10.11.1

Importe auf Version 9-kompatibel aktualisieren

Damit der Code nach der Aktualisierung der Abhängigkeit von Version 8 auf Version 9 weiterhin funktioniert, müssen Sie die Importanweisungen so ändern, dass die "compat"-Version jedes Imports verwendet wird. Beispiel:

Vorher: Version 8

import firebase from 'firebase/app';
import 'firebase/auth';
import 'firebase/firestore';

Nachher: Version 9 kompatibel

// v9 compat packages are API compatible with v8 code
import firebase from 'firebase/compat/app';
import 'firebase/compat/auth';
import 'firebase/compat/firestore';

Anpassung an den modularen Stil

Die APIs der Version 8 basieren zwar auf einem durch Punktmuster angeordneten Namespace- und Dienstmuster, der modulare Ansatz von Version 9 bedeutet jedoch, dass Ihr Code hauptsächlich um Funktionen organisiert ist. In Version 9 geben das Firebase-/App-Paket und andere Pakete keinen umfassenden Export zurück, der alle Methoden aus dem Paket enthält. Stattdessen exportieren die Pakete einzelne Funktionen.

In Version 9 werden Dienste als erstes Argument übergeben. Die Funktion verwendet dann die Details des Dienstes, um den Rest zu erledigen.

Beispiel: Refaktorierung einer einfachen Authentifizierungsfunktion

Vorher: Kompatibilität mit Version 9

Der Version 9-Kompatibilitätscode ist mit dem Version 8-Code identisch, aber die Importe haben sich geändert. Wenn Sie die kompatiblen Bibliotheken während des Upgrades verwenden, können Sie neben dem für Version 9 refaktorierten Code weiterhin Code von Version 8 verwenden.

import firebase from "firebase/compat/app";
import "firebase/compat/auth";

const auth = firebase.auth();
auth.onAuthStateChanged(user => {
  // Check for user status
});

Nachher: Version 9 modular

Die Funktion getAuth verwendet firebaseApp als ersten Parameter. Die Funktion onAuthStateChanged ist nicht wie in Version 8 von der Authentifizierungsinstanz verkettet. Stattdessen ist sie eine kostenlose Funktion, die auth als ersten Parameter verwendet.

import { getAuth, onAuthStateChanged } from "firebase/auth";

const auth = getAuth(firebaseApp);
onAuthStateChanged(auth, user => {
  // Check for user status
});

Initialisierungscode aktualisieren

Aktualisieren Sie den Initialisierungscode Ihrer App, sodass er die neue modulare Syntax der Version 9 verwendet. Es ist wichtig, diesen Code zu aktualisieren, nachdem Sie den gesamten Code in der Anwendung refaktoriert haben. Dies liegt daran, dass firebase.initializeApp() den globalen Status sowohl für die compat- als auch für die modulare API initialisiert, während die modulare Funktion initializeApp() nur den Status für die modulare API initialisiert.

Vorher: Kompatibilität mit Version 9

import firebase from "firebase/compat/app"

firebase.initializeApp({ /* config */ });

Nachher: Version 9 modular

import { initializeApp } from "firebase/app"

const firebaseApp = initializeApp({ /* config */ });

Kompatibilitätscode entfernen

Damit Sie die Größenvorteile des modularen SDK der Version 9 nutzen können, sollten Sie alle Aufrufe in den oben gezeigten modularen Stil umwandeln und alle import "firebase/compat/*-Anweisungen aus Ihrem Code entfernen. Danach sollten keine Verweise auf den globalen Namespace firebase.* oder einen anderen Code im SDK-Stil der Version 8 mehr enthalten sein.

Vorteile und Einschränkungen von Version 9

Die vollständig modularisierte Version 9 bietet folgende Vorteile gegenüber früheren Versionen:

  • Mit Version 9 kann die App-Größe erheblich reduziert werden. Es übernimmt das moderne JavaScript-Modulformat und ermöglicht so „Baumwackler“-Praktiken, bei denen Sie nur die Artefakte importieren, die Ihre App benötigt. Je nach Anwendung kann das Baumschütteln bei Version 9 zu 80% weniger Kilobyte führen als eine vergleichbare Anwendung, die mit Version 8 erstellt wurde.
  • Version 9 wird weiterhin von der kontinuierlichen Entwicklung von Funktionen profitieren, während Version 8 zu einem späteren Zeitpunkt eingefroren wird.