Passer au SDK Web modulaire (v9)

Nous conseillons de migrer les applications qui utilisent actuellement le SDK Web 8 ou une version antérieure vers version 9 en suivant les instructions de ce guide.

Dans ce guide, nous partons du principe que vous connaissez bien la version 8 et que vous allez effectuer les avantage d'un bundler de module comme webpack ou Rollup pour la mise à niveau et le développement continu de la version 9.

Nous vous recommandons vivement d'utiliser un bundler de module dans votre environnement de développement. Si vous n'en utilisez pas, vous ne pourrez pas profiter de la version 9 d'une taille d'application réduite. Vous aurez besoin de npm ou yarn pour installer le SDK.

À propos des bibliothèques compat

Deux types de bibliothèques sont disponibles pour la version 9 du SDK Web:

  • Modulaire : nouvelle surface d'API conçue pour faciliter la secousse des arbres (suppression du code inutilisé) afin de rendre votre application Web aussi petite et rapide que possible.
  • Compat : une surface d'API familière entièrement compatible avec version 8, ce qui vous permet de passer à la version 9 sans modifier le code de votre SDK en même temps. Les bibliothèques Compat ont une taille faible ou inexistante, ou de performances par rapport à leurs homologues de la version 8.

Ce guide part du principe que vous allez exploiter la compatibilité bibliothèques pour faciliter la mise à niveau. Ces bibliothèques vous permettent de continuer en utilisant le code de la version 8 en même temps que le code refactorisé pour la version 9. Cela signifie que vous pouvez compiler et déboguer votre application plus facilement à mesure que vous effectuez la mise à niveau ; processus.

Pour les applications dont l'exposition au SDK Web est très faible, il peut être pratique refactoriser le code de la version 8 sans utiliser les bibliothèques de compatibilité de la version 9 ; Si vous utilisez la mise à niveau d'une telle application, vous pouvez suivre les instructions de ce guide pour "version 9 modulaire" sans utiliser les bibliothèques compat.

À propos du processus de mise à niveau

Un champ d'application est défini pour chaque étape du processus de mise à jour afin que vous puissiez terminer la modification source pour votre application, puis la compiler et l'exécuter sans interruption. En résumé, Pour mettre à jour une application, procédez comme suit:

  1. Ajoutez les bibliothèques de la version 9 et les bibliothèques "compat" à votre application.
  2. Mettez à jour les instructions d'importation de votre code vers la compatibilité v9.
  3. Refactorisez le code pour le convertir en style modulaire.
  4. Suppression de la bibliothèque Authentication compat et du code de compatibilité pour Authentification pour profiter de l'avantage lié à la taille de l'application.
  5. Mise à jour du code d'initialisation vers le style modulaire
  6. Supprimez toutes les instructions de compatibilité de la version 9 restantes et le code de compatibilité de votre application.

Obtenir la version 9 du SDK

Pour commencer, récupérez les bibliothèques de la version 9 et les bibliothèques de compatibilité à l'aide de npm (dernière version https://www.npmjs.com/package/firebase):

npm i firebase@10.12.3

# OR

yarn add firebase@10.12.3

Mettre à jour les importations vers la compatibilité v9

Pour que votre code continue de fonctionner après la mise à jour de votre dépendance de la version 8 à v9, modifiez vos instructions d'importation pour utiliser la méthode de chaque importation. Exemple :

Avant: version 8

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

Après: compatibilité version 9

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

Refactoriser pour adopter un style modulaire

Alors que les API version 8 sont basées sur un service et un espace de noms en pointillés, l'approche modulaire de la version 9 signifie que votre code sera organisé en particulier autour des fonctions. Dans la version 9, le package firebase/app et les autres packages ne renvoient pas d'exportation complète contenant du package. Au lieu de cela, les packages exportent des fonctions individuelles.

Dans la version 9, les services sont transmis en tant que premier argument, et la fonction utilise les détails du service pour faire le reste.

Exemple: refactoriser une fonction Authentication simple

Avant: compatibilité version 9

Le code de compatibilité de la version 9 est identique à celui de la version 8, mais les importations ont changé. L'utilisation des bibliothèques compat pendant la mise à niveau vous permet de continuer en utilisant le code de la version 8 en même temps que le code refactorisé pour la version 9.

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

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

Après: version 9 modulaire

La fonction getAuth utilise firebaseApp comme premier paramètre. La La fonction onAuthStateChanged n'est pas enchaînée à l'instance d'authentification comme il le ferait être en version 8 ; Il s'agit plutôt d'une fonction gratuite qui utilise auth comme première .

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

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

Mettre à jour le code d'initialisation

Mettez à jour le code d'initialisation de votre application pour utiliser la nouvelle syntaxe modulaire (version 9). Il est important de mettre à jour ce code après avoir terminé de refactoriser tous les dans votre application. cela est dû au fait que firebase.initializeApp() initialise pour les API de compatibilité et modulaires, tandis que les API La fonction initializeApp() n'initialise que l'état pour les modèles modulaires.

Avant: compatibilité version 9

import firebase from "firebase/compat/app"

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

Après: version 9 modulaire

import { initializeApp } from "firebase/app"

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

Supprimer le code de compatibilité

Pour profiter des avantages de taille du SDK modulaire version 9, vous devriez à terme convertir tous les appels dans le style modulaire présenté ci-dessus et supprimer toutes les Instructions import "firebase/compat/* de votre code. Lorsque vous avez terminé, ne doit plus contenir de références à l'espace de noms global firebase.* ni à toute autre dans le style du SDK version 8.

Avantages et limites de la version 9

La version 9 entièrement modularisée présente les avantages suivants par rapport aux versions antérieures:

  • La version 9 permet de réduire considérablement la taille des applications. Il adopte le un format de module JavaScript moderne, permettant de "tree shaking" pratiques en dans laquelle vous n'importez que les artefacts dont votre application a besoin. Selon votre application, la version 9 peut réduire de 80% la quantité de kilo-octets utilisée une application comparable créée avec la version 8.
  • La version 9 continuera à bénéficier du développement continu de fonctionnalités, tandis que la version 8 sera figée à un moment ultérieur.