按照本指南在您的 Web 應用程序中使用 Firebase JavaScript SDK 或作為最終用戶訪問的客戶端,例如在 Node.js 桌面或 IoT 應用程序中。
第 1 步:創建一個 Firebase 項目並註冊您的應用
在將 Firebase 添加到 JavaScript 應用程序之前,您需要創建一個 Firebase 項目並向該項目註冊您的應用程序。當您向 Firebase 註冊您的應用程序時,您將獲得一個 Firebase 配置對象,您將使用該對象將您的應用程序與 Firebase 項目資源連接起來。
訪問了解 Firebase 項目以了解有關 Firebase 項目的更多信息以及將應用程序添加到項目的最佳實踐。
如果您還沒有 JavaScript 項目而只是想試用 Firebase 產品,則可以下載我們的快速入門示例之一。
第 2 步:安裝 SDK 並初始化 Firebase
本頁介紹了使用JavaScript 模塊格式的 Firebase JS SDK 版本 9 的設置說明。
此工作流使用 npm 並需要模塊捆綁器或 JavaScript 框架工具,因為 v9 SDK 經過優化以與模塊捆綁器一起使用以消除未使用的代碼(搖樹優化)並減小 SDK 大小。
使用 npm 安裝 Firebase:
npm install firebase
在您的應用中初始化 Firebase 並創建一個 Firebase App 對象:
import { initializeApp } from 'firebase/app'; // TODO: Replace the following with your app's Firebase project configuration const firebaseConfig = { //... }; const app = initializeApp(firebaseConfig);
Firebase 應用程序是一個類似容器的對象,它存儲通用配置並在 Firebase 服務之間共享身份驗證。在代碼中初始化 Firebase App 對像後,您可以添加並開始使用 Firebase 服務。
第 3 步:在您的應用中訪問 Firebase
Firebase 服務(如 Cloud Firestore、身份驗證、實時數據庫、遠程配置等)可在單獨的子包中導入。
下面的示例展示瞭如何使用 Cloud Firestore Lite SDK 檢索數據列表。
import { initializeApp } from 'firebase/app'; import { getFirestore, collection, getDocs } from 'firebase/firestore/lite'; // Follow this pattern to import other Firebase services // import { } from 'firebase/<service>'; // TODO: Replace the following with your app's Firebase project configuration const firebaseConfig = { //... }; const app = initializeApp(firebaseConfig); const db = getFirestore(app); // Get a list of cities from your database async function getCities(db) { const citiesCol = collection(db, 'cities'); const citySnapshot = await getDocs(citiesCol); const cityList = citySnapshot.docs.map(doc => doc.data()); return cityList; }
第 4 步:使用模塊打包器 (webpack/Rollup) 來縮減體積
Firebase Web SDK 旨在與模塊捆綁器一起使用以刪除任何未使用的代碼(搖樹優化)。我們強烈建議對生產應用程序使用此方法。 Angular CLI 、 Next.js 、 Vue CLI或Create React App 等工具自動處理通過 npm 安裝並導入到代碼庫中的庫的模塊捆綁。
有關詳細信息,請參閱我們的指南將模塊捆綁器與 Firebase 結合使用。
適用於 Web 的可用 Firebase 服務
現在您已設置好使用 Firebase,您可以開始在您的 Web 應用程序中添加和使用以下任何可用的 Firebase 服務。
以下命令顯示如何使用npm
導入本地安裝的 Firebase 庫。有關替代導入選項,請參閱可用的庫文檔。
下一步
了解 Firebase:
親身體驗Firebase Web Codelab 。
查看 Firebase JavaScript SDK支持的環境。
使用 Firebase 維護的其他開源庫加快您的開發,例如AngularFire 、 RxFire和FirebaseUI for web 。
準備啟動您的應用程序:
- 在 Google Cloud Console 中為您的項目設置預算提醒。
- 監控 Firebase 控制台中的使用情況和計費儀表板,以全面了解您的項目在多個 Firebase 服務中的使用情況。
- 查看Firebase 啟動清單。