Catch up on everthing we announced at this year's Firebase Summit. Learn more

從版本 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 模塊化”說明進行操作,而無需使用兼容庫。

關於升級過程

升級過程的每個步驟都有範圍,以便您可以完成應用程序源代碼的編輯,然後編譯並運行它而不會損壞。總之,以下是升級應用程序的操作:

  1. 將版本 9 庫和兼容庫添加到您的應用程序。
  2. 將代碼中的 import 語句更新為 v9 兼容。
  3. 將單個產品(例如,身份驗證)的代碼重構為模塊化風格。
  4. 可選:此時,在繼續之前,刪除Authentication compat library和compat code for Authentication以實現Authentication的應用程序大小優勢。
  5. 將每個產品(例如 Cloud Firestore、FCM 等)的功能重構為模塊化風格,編譯和測試直到所有區域完成。
  6. 將初始化代碼更新為模塊化風格。
  7. 從您的應用程序中刪除所有剩餘的版本 9 compat 語句和 compat 代碼。

獲取版本 9 SDK

首先,使用 npm 獲取版本 9 庫和兼容庫:

npm i firebase@9.5.0

# OR

yarn add firebase@9.5.0

將導入更新為 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 中形成查詢的代碼有何不同;沒有鏈接,以及諸如方法querywhere被現在作為免費的功能。

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.5.0/firebase-app-compat.js"></script>
<script src="https://www.gstatic.com/firebasejs/9.5.0/firebase-firestore-compat.js"></script>
<script src="https://www.gstatic.com/firebasejs/9.5.0/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 將在未來某個時間點被凍結。