此页面由 Cloud Translation API 翻译。

Switch to English

从版本 8 升级到模块化 Web SDK

当前使用 Firebase Web SDK 版本 8 或更早版本的应用应考虑使用本指南中的说明迁移到版本 9。

本指南假定您熟悉8版本，你会采取一个模块的优势，捆绑等的WebPack或汇总的升级和持续的版本9的开发。

强烈建议在您的开发环境中使用模块打包器。如果您不使用其中一个，您将无法利用版本 9 在减小应用程序大小方面的主要优势。你需要NPM或纱线安装SDK。

本指南中的升级步骤将基于使用身份验证和 Cloud Firestore SDK 的虚构网络应用。通过学习示例，您可以掌握升级所有受支持的 Firebase Web SDK 所需的概念和实际步骤。

关于兼容库

Firebase Web SDK 版本 9 有两种类型的库：

模块化-旨在促进树摇动（去除无用的代码）的新API的表面，使您的Web应用程序作为小而快越好。
COMPAT -一个熟悉的API表面是与版本8 SDK完全兼容，让您升级到9版本不改变所有的火力地堡码一次。与版本 8 的对应库相比，Compat 库几乎没有大小或性能优势。

本指南假定您将利用版本 9 兼容库来促进升级。这些库允许您继续使用第 8 版代码以及为第 9 版重构的代码。这意味着您可以在升级过程中更轻松地编译和调试您的应用程序。

对于很少接触 Firebase Web SDK 的应用程序（例如，仅对身份验证 API 进行简单调用的应用程序），在不使用版本 9 兼容库的情况下重构版本 8 代码可能是实用的。如果您要升级这样的应用程序，您可以按照本指南中“版本 9 模块化”的说明进行操作，而无需使用兼容库。

关于升级过程

升级过程的每一步都有范围，以便您可以完成应用程序源代码的编辑，然后编译并运行它而不会损坏。总之，以下是升级应用程序的操作：

将版本 9 库和兼容库添加到您的应用程序。
将代码中的 import 语句更新为 v9 兼容。
将单个产品（例如，身份验证）的代码重构为模块化风格。
可选：此时，在继续之前，删除Authentication compat library和compat code for Authentication以实现Authentication的应用程序大小优势。
将每个产品（例如 Cloud Firestore、FCM 等）的功能重构为模块化风格，编译和测试直到所有区域完成。
将初始化代码更新为模块化风格。
从您的应用程序中删除所有剩余的版本 9 compat 语句和 compat 代码。

获取版本 9 SDK

首先，使用 npm 获取版本 9 库和兼容库：

npm i firebase@9.1.3

# OR

yarn add firebase@9.1.3

将导入更新为 v9 兼容

为了在将依赖项从 v8 更新到 v9 beta 后保持代码正常运行，请更改导入语句以使用每个导入的“compat”版本。例如：

之前：版本 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 中，服务作为第一个参数传递，然后函数使用服务的详细信息来完成剩下的工作。让我们在重构对身份验证和 Cloud Firestore API 的调用的两个示例中检查其工作原理。

示例 1：重构 Authentication 函数

之前：版本 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 版代码样式

在升级期间使用 compat 库可让您继续使用版本 8 代码以及针对版本 9 重构的代码。这意味着您可以在将身份验证或其他 Firebase SDK 代码重构为版本 9 样式时保留 Cloud Firestore 的现有版本 8 代码，并且仍然使用两种代码样式成功编译您的应用程序。这同样适用于一个产品，例如云内的FireStore版本8和第9版的代码真正;新旧代码样式可以共存，只要您导入 compat 包：

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

删除兼容代码

为了实现版本9的模块化SDK的规模效益，最终将所有调用转换为上面所示的模块化样式并删除所有的import "firebase/compat/*语句从您的代码。当你完成后，应无到更多的参考资料firebase.*全局命名空间还是在第8版SDK风格的任何其他代码。

从窗口使用 compat 库

版本9 SDK进行了优化，工作与模块而不是浏览器的window对象。在以前版本库的使用允许火力地堡的加载和管理window.firebase命名空间。不建议继续这样做，因为它不允许消除未使用的代码。然而，JavaScript的SDK的compat的版本确实与工作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 代码，并为其提供与版本 8 SDK 相同的 API；这意味着你可以参考8版API参考和版本8的代码片段的详细信息。这种方法不建议长期使用，而是作为升级到完全模块化版本 9 库的开始。

版本 9 的优点和限制

完全模块化的版本 9 与早期版本相比具有以下优势：

版本 9 可显着减少应用程序大小。它采用现代 JavaScript 模块格式，允许您只导入应用程序需要的工件的“摇树”实践。根据您的应用程序，与使用版本 8 构建的类似应用程序相比，版本 9 的 tree-shaking 可以减少 80% 的 KB。
版本 9 将继续受益于正在进行的功能开发，而版本 8 将在未来某个时间点被冻结。