Join us for Firebase Summit on November 10, 2021. Tune in to learn how Firebase can help you accelerate app development, release with confidence, and scale with ease. Register

Обновление с версии 8 до модульного веб-SDK

Приложениям, которые в настоящее время используют Firebase Web SDK версии 8 или более ранней, следует подумать о переходе на версию 9, следуя инструкциям в этом руководстве.

Это руководство предполагает , что вы знакомы с версией 8 , и что вы будете воспользоваться модулем пакетирования , таких как WebPack или накопительным пакетом для модернизации и текущей версии 9 развития.

Настоятельно рекомендуется использовать сборщик модулей в вашей среде разработки. Если вы его не используете, вы не сможете воспользоваться основными преимуществами версии 9 в виде уменьшенного размера приложения. Вы будете нуждаться в НОМ или пряже для установки SDK.

Шаги обновления в этом руководстве будут основаны на воображаемом веб-приложении, которое использует SDK для аутентификации и Cloud Firestore. Проработав примеры, вы сможете освоить концепции и практические шаги, необходимые для обновления всех поддерживаемых Firebase Web SDK.

О совместимых библиотеках

Для Firebase Web SDK версии 9 доступны два типа библиотек:

  • Modular - новый API поверхность предназначена для облегчения древовидного встряхивания (удаления неиспользуемого кода) , чтобы сделать ваш веб - приложение , как малые и как можно быстрее.
  • Compat - знакомый API поверхность , которая полностью совместима с версией 8 SDK, что позволит вам обновить до версии 9 , не меняя весь код Firebase сразу. Совместимые библиотеки практически не имеют преимуществ в размере или производительности по сравнению с их аналогами версии 8.

В этом руководстве предполагается, что вы воспользуетесь преимуществами совместимых библиотек версии 9, чтобы упростить обновление. Эти библиотеки позволяют вам продолжать использовать код версии 8 вместе с кодом, отредактированным для версии 9. Это означает, что вы можете легче компилировать и отлаживать свое приложение по мере прохождения процесса обновления.

Для приложений с очень небольшим доступом к Firebase Web SDK - например, приложение, которое делает только простой вызов API аутентификации - может быть целесообразным рефакторинг кода версии 8 без использования совместимых библиотек версии 9. Если вы обновляете такое приложение, вы можете следовать инструкциям в этом руководстве для «модульной версии 9» без использования совместимых библиотек.

О процессе обновления

Каждый шаг процесса обновления ограничен так, чтобы вы могли закончить редактирование исходного кода для своего приложения, а затем скомпилировать и запустить его без сбоев. Итак, вот что вы сделаете, чтобы обновить приложение:

  1. Добавьте в свое приложение библиотеки версии 9 и совместимые библиотеки.
  2. Обновите операторы импорта в своем коде до совместимости с v9.
  3. Выполните рефакторинг кода отдельного продукта (например, Authentication) до модульного стиля.
  4. Необязательно: на этом этапе удалите библиотеку совместимости аутентификации и код совместимости для аутентификации, чтобы реализовать преимущество размера приложения для аутентификации, прежде чем продолжить.
  5. Рефакторинг функций для каждого продукта (например, Cloud Firestore, FCM и т. Д.) До модульного стиля, компиляция и тестирование до завершения всех областей.
  6. Обновите код инициализации до модульного стиля.
  7. Удалите из приложения все оставшиеся операторы совместимости версии 9 и код совместимости.

Получите SDK версии 9

Для начала получите библиотеки версии 9 и библиотеки compat с помощью npm:

npm i firebase@9.1.3

# OR

yarn add firebase@9.1.3

Обновить импорт до совместимости с v9

Чтобы ваш код продолжал работать после обновления вашей зависимости с v8 до v9 beta, измените операторы импорта, чтобы использовать «совместимую» версию каждого импорта. Например:

Раньше: версия 8

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

После: совместимость с версией 9

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

Рефакторинг до модульного стиля

В то время как версия 8 API , основаны на дот-прикован пространства имен и службы шаблон, версия 9 модульной средства захода на посадку , что ваш код будет организован главным образом вокруг функций. В версии 9, firebase/app пакет и другие пакеты не возвращают комплексный экспорт , который содержит все методы из пакета. Вместо этого пакеты экспортируют отдельные функции.

В версии 9 службы передаются в качестве первого аргумента, а затем функция использует детали службы для выполнения всего остального. Давайте посмотрим, как это работает, на двух примерах, в которых выполняется рефакторинг вызовов API аутентификации и Cloud Firestore.

Пример 1: рефакторинг функции аутентификации

Раньше: совместимость с версией 9

Код совместимости версии 9 идентичен коду версии 8, но импорт изменился.

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

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

После: версия 9 модульная

getAuth функция принимает firebaseApp в качестве первого параметра. onAuthStateChanged функция не прикован от auth например , как это было бы в версии 8; вместо этого, это свободная функция , которая принимает auth в качестве первого параметра.

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

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

Пример 2: рефакторинг функции Cloud Firestore

Раньше: совместимость с версией 9

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);
    });

После: версия 9 модульная

getFirestore функция принимает firebaseApp в качестве первого параметра, который был возвращен из initializeApp в предыдущем примере. Обратите внимание, как код для формирования запроса в версии 9 сильно отличается; нет цепочки, а также методы , такие как query или , where в настоящее время выставлены в виде свободных функций.

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());
});

Пример 3: объединение стилей кода версии 8 и версии 9

Использование совместимых библиотек во время обновления позволяет вам продолжать использовать код версии 8 вместе с кодом, отредактированным для версии 9. Это означает, что вы можете сохранить существующий код версии 8 для Cloud Firestore, пока вы реорганизуете аутентификацию или другой код Firebase SDK в стиль версии 9, и все же успешно скомпилируйте приложение с обоими стилями кода. То же самое относится и к версии 8 и версии 9 кода в таких продуктах, как облако Firestore; новые и старые стили кода могут сосуществовать, пока вы импортируете совместимые пакеты:

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

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

Имейте в виду, что, хотя ваше приложение будет компилироваться, вы не получите преимуществ модульного кода по размеру приложения, пока полностью не удалите из приложения операторы compat и код.

Обновить код инициализации

Обновите код инициализации вашего приложения, чтобы использовать новый модульный синтаксис версии 9. Важно , чтобы обновить этот код после завершения рефакторинга всего кода в вашем приложении; это потому , что firebase.initializeApp() инициализирует глобальное состояние для обоих Compat и модульных API - интерфейсов, в то время как модульный initializeApp() функция инициализирует только состояние для модульной.

Раньше: совместимость с версией 9

import firebase from "firebase/compat/app"

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

После: версия 9 модульная

import { initializeApp } from "firebase/app"

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

Удалить код совместимости

Для того, чтобы реализовать преимущества размера модульного SDK версии 9, вы должны в конечном итоге преобразовать все вызовы в модульном стиль , показанном выше , и удалить все import "firebase/compat/* выписка из вашего кода. Когда вы закончите, не должно быть никакого больше ссылок на firebase.* глобальное пространство имен или любой другой код в стиле SDK версии 8.

Использование библиотеки совместимости из окна

Версия 9 SDK оптимизирована для работы с модулями , а не браузер window объекта. Предыдущие версии библиотеки разрешено загружать и управление Firebase с помощью window.firebase имен. В дальнейшем это не рекомендуется, так как это не позволяет удалить неиспользуемый код. Однако Compat версия JavaScript SDK делает работу с window для разработчиков , которые предпочитают не сразу начать модульный путь обновления.

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

Библиотека совместимости использует модульный код версии 9 под капотом и предоставляет ему тот же API, что и SDK версии 8; это означает , что вы можете обратиться к ссылке версии 8 API и версии 8 фрагментов кода для деталей. Этот метод рекомендуется не для длительного использования, а в качестве начала для обновления до полностью модульной библиотеки версии 9.

Преимущества и ограничения версии 9

Полностью модульная версия 9 имеет следующие преимущества перед более ранними версиями:

  • Версия 9 позволяет значительно уменьшить размер приложения. Он принимает современный формат модуля JavaScript, позволяющий использовать методы «встряхивания дерева», при которых вы импортируете только те артефакты, которые необходимы вашему приложению. В зависимости от вашего приложения, встряхивание дерева с версией 9 может привести к уменьшению количества килобайт на 80% по сравнению с аналогичным приложением, созданным с использованием версии 8.
  • Версия 9 будет по-прежнему получать преимущества от непрерывной разработки функций, а версия 8 будет заморожена в будущем.