Join us in person and online for Firebase Summit on October 18, 2022. Learn how Firebase can help you accelerate app development, release your app with confidence, and scale with ease. Register now

將 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 CLINext.jsVue CLICreate React App等工具會自動處理通過 npm 安裝並導入代碼庫的庫的模塊捆綁。

有關更多信息,請參閱我們的指南將模塊捆綁器與 Firebase一起使用。

適用於 Web 的可用 Firebase 服務

現在您已設置好使用 Firebase,您可以開始在您的網絡應用中添加和使用以下任何可用的 Firebase 服務。

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

下一步

了解 Firebase: