Przejdź z interfejsu API z przestrzeni nazw na modułowy interfejs API

Aplikacje używające obecnie dowolnego interfejsu API Firebase dostępnego w przestrzeni nazw z bibliotek compat od wersji 8 lub wcześniejszej, należy rozważyć na modułowy interfejs API zgodnie z instrukcjami w tym przewodniku.

W tym przewodniku przyjęto założenie, że znacie interfejs API z przestrzenią nazw i że będziesz korzystać program do tworzenia pakietów modułów, np. webpack, Podsumowanie w celu przejścia na wyższą wersję oraz na ciągłe tworzenie aplikacji modułowych.

Korzystanie z pakietu modułów w środowisku programistycznym wymaga zalecane. Jeśli nie użyjesz, nie będziesz mieć możliwości korzystania z Modułowy interfejs API zapewnia mniejszy rozmiar aplikacji. Potrzebujesz npm lub yarn, aby zainstalować pakiet SDK.

Czynności uaktualnienia opisane w tym przewodniku opierają się na wymyślonej aplikacji internetowej, korzysta z pakietów SDK Authentication i Cloud Firestore. Analizując przykłady, opanuje zagadnienia i praktyczne czynności wymagane do przejścia na wyższą wersję internetowe pakiety SDK Firebase.

Informacje o bibliotekach z przestrzeni nazw (compat)

Dla pakietu SDK internetowego Firebase są dostępne 2 typy bibliotek:

  • Modular – nowa powierzchnia interfejsu API zaprojektowana w sposób ułatwiający kołysanie drzew. (usunięcie nieużywanego kodu) w staramy się, by Twoja aplikacja internetowa była jak najmniejsza i najszybsza.
  • Przestrzeń nazw (compat) – znana przestrzeń interfejsu API, która jest w pełni zgodne z starszych wersji pakietu SDK, co pozwala uaktualnić kodu Firebase. Biblioteki Compat mają bardzo mało brak rozmiaru i wydajności w porównaniu z ich odpowiednikami w przestrzeni nazw.

W tym przewodniku zakładamy, że będziesz korzystać z i bibliotek, które ułatwiają uaktualnienie. Dzięki tym bibliotekom możesz kontynuować za pomocą kodu z przestrzeni nazw i kodu zmodyfikowanego dla modułowego interfejsu API. Oznacza to, że łatwiej skompilować i debugować aplikację w trakcie aktualizacji. proces tworzenia konta.

W przypadku aplikacji, które mają bardzo małą ekspozycję na pakiet SDK Firebase Web SDK – na przykład aplikacji, która wysyła tylko proste wywołanie do interfejsów API Authentication – może to być pozwala na refaktoryzację starszego kodu z przestrzeni nazw bez korzystania z bibliotek zgodnych. Jeśli aktualizujesz taką aplikację, możesz postępować zgodnie z instrukcjami w tym przewodniku dla „modułowego interfejsu API” bez korzystania z bibliotek kompatybilnych.

Proces uaktualniania

Każdy etap procesu uaktualniania ma zakres ograniczony, więc możesz dokończyć edycję dla Twojej aplikacji, a potem skompiluj i uruchom ją bez awarii. Podsumowując, Aby uaktualnić aplikację:

  1. Dodaj do swojej aplikacji biblioteki modułowe i biblioteki kompatybilne.
  2. Zaktualizuj instrukcje importu w kodzie, tak aby były zgodne.
  3. Kod refaktoryzacyjny pojedynczego produktu (np. Authentication) na modułowy.
  4. Opcjonalnie: na tym etapie usuń bibliotekę kompatybilną Authentication i kod kompatybilny przez Authentication, aby skorzystaj z dodatkowego rozmiaru aplikacji Authentication, zanim przejdziesz dalej.
  5. Funkcje refaktoryzacyjne dla każdego produktu (np. Cloud Firestore, FCM itp.) na styl modułowy, kompilowanie tak długo, aż wszystkie obszary będą gotowe.
  6. Zaktualizuj kod inicjowania do stylu modułowego.
  7. Usuń wszystkie pozostałe oświadczenia kompatybilne i kod kompatybilny z do aplikacji.

Pobierz najnowszą wersję pakietu SDK

Na początek pobierz biblioteki modułowe i biblioteki zgodne przy użyciu npm:

npm i firebase@10.13.1

# OR

yarn add firebase@10.13.1

Zaktualizuj importy do zgodności

Aby po zaktualizowaniu zależności kod działał, zmień instrukcje importowania tak, aby używały wersji każdego importu. Przykład:

Przed: wersja 8 lub starsza

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

Po: zgodny

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

Refaktoryzacja na styl modułowy

Z kolei interfejsy API z przestrzenią nazw bazują na przestrzeni nazw i usłudze w łańcuchu kropek podejście modułowe oznacza, że kod będzie uporządkowany głównie na temat funkcji. W modularnym interfejsie API pakiet firebase/app inne pakiety nie zwracają pełnego eksportu zawierającego wszystkie z pakietu. Zamiast tego eksportują one poszczególne funkcje.

W modułowym interfejsie API usługi są przekazywane jako pierwszy argument, a następnie funkcja korzysta ze szczegółów usługi do obsługi pozostałych zadań. Przyjrzyjmy się, jak to działa w 2 przykłady refaktoryzujące wywołania interfejsów API Authentication i Cloud Firestore.

Przykład 1: refaktoryzacja funkcji Authentication

Przed: zgodny

Kod kompatybilny jest taki sam jak kod z przestrzeni nazw, ale importy uległy zmianie.

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

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

Po: modułowy

Funkcja getAuth przyjmuje jako pierwszy parametr firebaseApp. onAuthStateChanged funkcja nie jest połączona z instancją auth w sposób łańcuchowy, w interfejsie API z przestrzenią nazw; jest to bezpłatne narzędzie, dla funkcji, która jako pierwszy parametr przyjmuje auth.

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

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

Zaktualizuj obsługę metody uwierzytelniania getRedirectResult

Modułowy interfejs API wprowadza zmianę powodującą niezgodność w getRedirectResult. Gdy nie zostanie wywołana żadna operacja przekierowania, modułowy interfejs API zwróci wartość null, a nie interfejs API z przestrzenią nazw, który zwrócił błąd UserCredential użytkownikowi null.

Przed: zgodny

const result = await auth.getRedirectResult()
if (result.user === null && result.credential === null) {
  return null;
}
return result;

Po: modułowy

const result = await getRedirectResult(auth);
// Provider of the access token could be Facebook, Github, etc.
if (result === null || provider.credentialFromResult(result) === null) {
  return null;
}
return result;

Przykład 2: refaktoryzacja funkcji Cloud Firestore

Przed: zgodny

import "firebase/compat/firestore"

const db = firebase.firestore();
db.collection("cities").where("capital", "==", true)
    .get()
    .then((querySnapshot) => {
        querySnapshot.forEach((doc) => {
            // doc.data() is never undefined for query doc snapshots
            console.log(doc.id, " => ", doc.data());
        });
    })
    .catch((error) => {
        console.log("Error getting documents: ", error);
    });

Po: modułowy

Funkcja getFirestore przyjmuje pierwszy parametr firebaseApp, który została zwrócona z funkcji initializeApp we wcześniejszym przykładzie. Zwróć uwagę, że funkcja kod służący do tworzenia zapytania różni się bardzo od modułowego interfejsu API; nie stosuje się łańcuchów, takie jak query czy where są teraz udostępniane jako funkcje bezpłatne.

import { getFirestore, collection, query, where, getDocs } from "firebase/firestore";

const db = getFirestore(firebaseApp);

const q = query(collection(db, "cities"), where("capital", "==", true));

const querySnapshot = await getDocs(q);
querySnapshot.forEach((doc) => {
  // doc.data() is never undefined for query doc snapshots
  console.log(doc.id, " => ", doc.data());
});

Zaktualizuj odniesienia do Firestore DocumentSnapshot.exists

Modułowy interfejs API wprowadza zmianę powodującą niezgodność, w której właściwość Pole firestore.DocumentSnapshot.exists zostało zmienione na metodę. funkcje są zasadniczo takie same (sprawdzanie, czy dokument istnieje), ale musisz zmodyfikować kod, aby użyć nowszej metody, jak pokazano poniżej:

Przed:Kompatyzm

if (snapshot.exists) {
  console.log("the document exists");
}

Po: modułowy

if (snapshot.exists()) {
  console.log("the document exists");
}

Przykład 3: łączenie przestrzeni nazw z modułowymi stylami kodu

Użycie bibliotek zgodnych podczas uaktualniania pozwoli Ci w dalszym ciągu używać przestrzeni nazw z refaktoryzowanym na potrzeby modułowego interfejsu API. Oznacza to, że możesz zachować istniejący kod dla Cloud Firestore z przestrzenią nazw podczas refaktoryzacji pola Authentication lub inny kod pakietu SDK Firebase, aby na stylu modułowym, a przy tym nadal efektywnie skompilować aplikację za pomocą kodu stylów. To samo dotyczy przestrzeni nazw i modułowego kodu interfejsu API w obrębie produktu, takiego jak jako Cloud Firestore; nowe i stare style kodu mogą współistnieć, o ile tylko importowanie pakietów zgodnych:

import firebase from 'firebase/compat/app';
import 'firebase/compat/firestore';
import { getDoc } from 'firebase/firestore'

const docRef = firebase.firestore().doc();
getDoc(docRef);

Pamiętaj, że chociaż aplikacja się kompiluje, nie będzie jej rozmiar. z kodu modułowego, dopóki nie usuniesz w pełni zgodnych instrukcji kod z aplikacji.

Zaktualizuj kod inicjowania

Zaktualizuj kod inicjowania aplikacji, aby używać składni modułowej. Jest Ważne jest zaktualizowanie tego kodu po zakończeniu refaktoryzacji wszystkich kod w aplikacji, jest to, ponieważ firebase.initializeApp() inicjuje działanie globalne zarówno dla zgodnych, jak i modułowych interfejsów API, Funkcja initializeApp() inicjuje tylko stan modułu.

Przed: zgodny

import firebase from "firebase/compat/app"

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

Po: modułowy

import { initializeApp } from "firebase/app"

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

Usuń kod kompatybilny

Aby wykorzystać możliwości związane z rozmiarem modułu interfejsu API, przekonwertuj wszystkie wywołania na styl modułowy pokazany powyżej i usuń wszystkie import "firebase/compat/* instrukcji z Twojego kodu. Gdy skończysz, nie powinny zawierać więcej odwołań do globalnej przestrzeni nazw firebase.* ani żadnej innej w stylu interfejsu API z przestrzenią nazw.

Używanie biblioteki kompatybilnej z poziomu okna

Modułowy interfejs API jest zoptymalizowany pod kątem pracy z modułami, a nie z interfejsem przeglądarki window obiekt. Poprzednie wersje biblioteki umożliwiały wczytywanie do zarządzania Firebase za pomocą przestrzeni nazw window.firebase. To nie jest jest zalecane, ponieważ nie pozwala na usuwanie nieużywanych kodów. Jednak kompatybilna wersja pakietu SDK JavaScript działa z tagiem window dla programistów, którzy nie chcą od razu rozpoczynać modułowej ścieżki uaktualnienia.

<script src="https://www.gstatic.com/firebasejs/10.13.1/firebase-app-compat.js"></script>
<script src="https://www.gstatic.com/firebasejs/10.13.1/firebase-firestore-compat.js"></script>
<script src="https://www.gstatic.com/firebasejs/10.13.1/firebase-auth-compat.js"></script>
<script>
   const firebaseApp = firebase.initializeApp({ /* Firebase config */ });
   const db = firebaseApp.firestore();
   const auth = firebaseApp.auth();
</script>

Biblioteka zgodności korzysta z modułowego kodu, udostępnia mu ten sam interfejs API co interfejs API z przestrzenią nazw; Oznacza to, że możesz zapoznaj się z dokumentacją interfejsu Namespaced API. i fragmenty kodu w przestrzeni nazw. Ta metoda nie jest zalecane do długoterminowego użytku, ale jako początek przechodzenia na w pełni modułowe bibliotece.

Zalety i ograniczenia modułu SDK

W pełni modułowy pakiet SDK ma te zalety w porównaniu z wcześniejszymi wersjami:

  • Modułowy pakiet SDK umożliwia znaczne zmniejszenie rozmiaru aplikacji. Wykorzystuje nowoczesny JavaScript Format modułu umożliwiający „drżenie drzewa” procedury, w ramach których importujesz tylko artefakty potrzebne aplikacji. W zależności od aplikacji wstrząsanie drzewem dzięki modułowemu pakietowi SDK może zapewnić o 80% mniej kilobajtów niż porównywalnej aplikacji stworzonej przy użyciu interfejsu API z przestrzenią nazw.
  • Modułowy pakiet SDK nadal będzie korzystać ze stałego rozwoju funkcji, a interfejs API z przestrzenią nazw – już nie.