升级到模块化 Web SDK (v9)

对于目前使用 Web SDK 8 或更低版本的应用,请考虑迁移到 使用本指南中的说明创建 v9 版本。

本指南假定您熟悉版本 8,并且会学习 充分利用模块打包器(例如 webpack 或 用于升级和持续开发 v9 的汇总信息

强烈建议在开发环境中使用模块打包器。 如果您不使用版本 9,就无法使用版本 9 的主 在缩减应用大小方面的优势您需要使用 npmyarn 安装 SDK。

兼容型库简介

Web SDK 版本 9 提供了两种类型的库:

  • 模块化 - 用于实现摇树优化的新 API 接口 (移除未使用的代码),以尽可能缩减您的 Web 应用的大小和运行速度。
  • 兼容型 - 一种熟悉的 API 接口,与 版本 8,让您可以升级到版本 9,而无需更改所有 SDK 代码兼容库的大小非常小,甚至没有, 在性能方面的优势。

本指南假定您将利用 v9 兼容型库来推动升级。借助这些库 使用版本 8 的代码和针对版本 9 重构的代码。这意味着您可以 在升级过程中更轻松地编译和调试应用 过程。

如果应用对 Web SDK 的曝光率非常低, 重构了版本 8 代码,而无需使用版本 9 兼容型库。如果您 升级此类应用,则可按照本指南中的说明 "版本 9 模块化"而无需使用兼容型库

升级流程简介

升级流程的每个步骤都限定了范围,这样您便可以完成应用源代码的修改,然后在不出现中断的情况下编译并运行源代码。总的来说,如需升级应用,您需要执行以下操作:

  1. 将 v9 库和兼容型库添加到您的应用中。
  2. 将代码中的 import 语句更新为使用 v9 兼容型库。
  3. 将代码重构为模块化样式。
  4. 移除用于身份验证的兼容型库和兼容型代码 通过身份验证来实现应用大小方面的优势。
  5. 将初始化代码更新为模块化样式。
  6. 移除应用中所有剩余的 v9 兼容型语句和代码。

获取 v9 SDK

首先,请使用 npm 获取版本 9 库和兼容型库 (最新版本 https://www.npmjs.com/package/firebase):

npm i [email protected]

# OR

yarn add [email protected]

将导入项更新为 v9 兼容型库

将依赖项从 v8 更新为 将导入语句更改为使用“兼容型”每次导入的内容。 例如:

之前:v8

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

之后:v9 兼容型库

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

重构为模块化样式

v8 对应的 API 基于点链命名空间和服务模式,而 v9 模块化方法意味着您的代码将主要围绕函数进行组织。在版本 9 中,firebase/app 软件包和 其他软件包不会返回包含所有 方法。而是会导出个别函数。

在版本 9 中,服务作为第一个参数传递,函数随后 系统将使用服务的详细信息执行其余操作

示例:重构简单的 Authentication 函数

之前:v9 兼容型库

版本 9 兼容型代码与版本 8 代码相同,但导入 都发生了哪些变化在升级期间使用兼容型库 使用版本 8 的代码和针对版本 9 重构的代码。

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

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

之后:v9 模块化库

getAuth 函数将 firebaseApp 作为其第一个参数。通过 onAuthStateChanged 函数未像在 Auth 中那样与身份验证实例相关联 为版本 8;而是一个自由函数,它以 auth 作为其第一个 参数。

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

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

更新初始化代码

更新应用的初始化代码,使用新的模块化 v9 语法。重构应用中的所有代码后,请务必更新初始化代码;这是因为 firebase.initializeApp() 会初始化兼容型和模块化 API 的全局状态,而模块化 initializeApp() 函数仅会初始化模块化 API 的状态。

之前:v9 兼容型库

import firebase from "firebase/compat/app"

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

之后:v9 模块化库

import { initializeApp } from "firebase/app"

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

移除兼容型代码

为了使用 v9 模块化 SDK 精简应用大小,您最终应将所有调用转换为上述的模块化样式,并从代码中移除所有 import "firebase/compat/* 语句。完成后,代码中不应再包含对 firebase.* 全局命名空间的引用或版本 8 SDK 样式中任何其他代码的引用。

版本 9 的好处和限制

与早期版本相比,完全模块化的 v9 具有以下优势:

  • 版本 9 可大幅缩减应用大小。它采用 新型 JavaScript 模块格式,支持“摇树(优化)优化”做法 只需导入应用需要的工件即可与使用 v8 构建的类似应用相比,使用 v9 进行摇树优化可使大小(以 Kb 为单位)减少 80%,具体取决于您的应用。
  • v9 将继续受益于后续的功能开发, 而版本 8 则会在未来某一时间冻结。