將 Firebase 添加到您的 JavaScript 項目

按照本指南在您的 Web 應用程序中使用 Firebase JavaScript SDK 或作為最終用戶訪問的客戶端，例如，在 Node.js 桌面或 IoT 應用程序中。

第 1 步：創建一個 Firebase 項目並註冊您的應用

在將 Firebase 添加到 JavaScript 應用之前，您需要創建一個 Firebase 項目並將您的應用註冊到該項目。當您向 Firebase 註冊您的應用時，您將獲得一個 Firebase 配置對象，您將使用該對象將您的應用與您的 Firebase 項目資源連接起來。

請訪問了解 Firebase 項目，詳細了解 Firebase 項目以及將應用添加到項目的最佳做法。

如果您還沒有 JavaScript 項目並且只想試用 Firebase 產品，您可以下載我們的快速入門示例之一。

第 2 步：安裝 SDK 並初始化 Firebase

本頁面介紹 Firebase JS SDK 版本 9 的設置說明，該版本使用JavaScript 模塊格式。

此工作流使用 npm 並需要模塊捆綁器或 JavaScript 框架工具，因為 v9 SDK 經過優化，可與模塊捆綁器一起使用，以消除未使用的代碼（搖樹）並減小 SDK 大小。

  1. 使用 npm 安裝 Firebase：

    npm install firebase

  2. 在您的應用中初始化 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，您可以開始在您的網絡應用中添加和使用以下任何可用的 Firebase 服務。

以下命令顯示如何導入使用npm本地安裝的 Firebase 庫。有關替代導入選項，請參閱可用的庫文檔。

下一步

了解 Firebase：