Join us in person and online for Firebase Summit on October 18, 2022. Learn how Firebase can help you accelerate app development, release your app with confidence, and scale with ease. Register now

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

Оптимизируйте свои подборки Сохраняйте и классифицируйте контент в соответствии со своими настройками.

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

В этом руководстве предполагается, что вы знакомы с версией 8 и воспользуетесь преимуществами сборщика модулей, такого как webpack или Rollup , для обновления и текущей разработки версии 9.

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

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

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

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

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

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

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

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

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

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

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

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

npm i firebase@9.9.4

# OR

yarn add firebase@9.9.4

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

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

До: версия 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';

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

В то время как API версии 8 основаны на точечной цепочке пространства имен и шаблоне обслуживания, модульный подход версии 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());
});

Обновить ссылки на Firestore DocumentSnapshot.exists

В версии 9 представлено критическое изменение, в котором свойство firestore.DocumentSnapshot.exists было изменено на метод . Функциональность по существу такая же (проверка существования документа), но вы должны реорганизовать свой код, чтобы использовать метод v9, как показано ниже:

До: версия 9 совместима

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

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

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

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

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

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

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

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

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

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

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

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

<script src="https://www.gstatic.com/firebasejs/9.9.4/firebase-app-compat.js"></script>
<script src="https://www.gstatic.com/firebasejs/9.9.4/firebase-firestore-compat.js"></script>
<script src="https://www.gstatic.com/firebasejs/9.9.4/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; это означает, что вы можете обратиться к справочнику API версии 8 и фрагментам кода версии 8 для получения подробной информации. Этот метод не рекомендуется для длительного использования, а только в качестве начала обновления до полностью модульной библиотеки версии 9.

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

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

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