將 Firebase 新增至您的 JavaScript 專案

請按照本指南的說明,在您的網頁應用程式中使用 Firebase JavaScript SDK,或將其做為用戶端用於最終使用者存取,例如在 Node.js 桌面或物聯網應用程式中。

步驟 1:建立 Firebase 專案並註冊應用程式

您必須先建立 Firebase 專案,並將應用程式註冊至該專案,才能將 Firebase 新增至 JavaScript 應用程式。透過 Firebase 註冊應用程式時,您會取得 Firebase 設定物件,用於將應用程式連結至 Firebase 專案資源。

請參閱「瞭解 Firebase 專案」,進一步瞭解 Firebase 專案,以及在專案中新增應用程式的最佳做法。

如果您還沒有 JavaScript 專案,但想試用 Firebase 產品,可以下載我們的快速入門範例

步驟 2:安裝 SDK 並初始化 Firebase

本頁面說明 Firebase JS SDK 模組化 API 的設定操作說明,該 API 使用 JavaScript 模組格式。

此工作流程使用 npm,並需要模組組合器或 JavaScript 架構工具,因為模組化 API 經過最佳化,可與模組封裝器搭配使用,藉此消除未使用的程式碼 (樹動) 並縮減 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 服務並開始使用。

    如果應用程式包含以伺服器端算繪 (SSR) 為基礎的動態功能,您必須採取一些額外步驟,確保設定在伺服器算繪和用戶端算繪階段持續保留。在伺服器邏輯中實作 FirebaseServerApp 介面,以便透過服務工作者管理應用程式的工作階段

步驟 3:在應用程式中存取 Firebase

Firebase 服務 (例如 Cloud FirestoreAuthenticationRealtime DatabaseRemote Config 等) 可在個別子套件中匯入。

以下範例說明如何使用 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」指南。

適用於網頁應用程式的 Firebase 服務

設定完成後,您就可以開始在網頁應用程式中新增及使用下列可用的 Firebase 服務。

下列指令顯示如何使用 npm 匯入本機安裝的 Firebase 程式庫。如需其他匯入選項,請參閱可用的程式庫說明文件

後續步驟

瞭解 Firebase: