將 Firebase 新增至您的 JavaScript 專案

請按照本指南，在網頁應用程式中使用 Firebase JavaScript SDK，或將其做為用戶端，供使用者存取，例如在 Node.js 桌面或 IoT 應用程式中。

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

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

請參閱「瞭解 Firebase 專案」一文，進一步瞭解 Firebase 專案，以及將應用程式新增至專案的最佳做法。

如果您還沒有 JavaScript 專案，只是想試用 Firebase 產品，可以下載快速入門範例。

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

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

這項工作流程會使用 npm，且需要模組整合工具或 JavaScript 架構工具，因為模組化 API 經過最佳化，可與模組整合工具搭配使用，消除未使用的程式碼 (tree-shaking) 並縮減 SDK 大小。

  1. 使用 npm 安裝 Firebase：

    npm install firebase

  2. 在應用程式中初始化 Firebase，並建立 Firebase 應用程式物件：

    import { initializeApp } from 'firebase/app';

// TODO: Replace the following with your app's Firebase configuration
const firebaseConfig = {
  //...
};

const app = initializeApp(firebaseConfig);

    Firebase 應用程式是類似容器的物件，可儲存通用設定，並在 Firebase 服務之間共用驗證。在程式碼中初始化 Firebase 應用程式物件後，即可新增並開始使用 Firebase 服務。

    如果應用程式包含以伺服器端轉譯 (SSR) 為基礎的動態功能，您需要採取一些額外步驟，確保設定在伺服器轉譯和用戶端轉譯階段中保持不變。在伺服器邏輯中，實作 FirebaseServerApp 介面，使用 Service Worker 最佳化應用程式的工作階段管理。

步驟 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 &>#39;firebase/service';

// TODO: Replace the following with your app&#39;s Firebase 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 JavaScript SDK 可搭配模組套件，移除任何未使用的程式碼 (tree shaking)。強烈建議您在正式版應用程式中採用這種做法。Angular CLI、Next.js、Vue CLI 或 Create React App 等工具，會自動處理透過 npm 安裝並匯入程式碼集程式庫的模組套件。

詳情請參閱「搭配使用模組繫結器與 Firebase」指南。

可用的 Firebase 網頁服務

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

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

1 Firebase AI Logic 舊稱為「Vertex AI in Firebase」，套件為 firebase/vertexai。

2 Firebase SQL Connect 舊稱為「Firebase Data Connect」。

後續步驟

瞭解 Firebase：