將 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 Firestore、Authentication、Realtime Database、Remote 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 CLI、Next.js、Vue CLI 或 Create React App 等工具會自動處理透過 npm 安裝並匯入至程式碼庫的程式庫模組捆綁作業。

詳情請參閱「使用模組套件組合器與 Firebase」指南。

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

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

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

後續步驟

瞭解 Firebase：