將 Firebase 新增至您的 JavaScript 專案

請按照本指南的說明，在網頁應用程式中使用 Firebase JavaScript SDK，或做為供使用者存取的用戶端，例如在 Node.js 電腦或物聯網應用程式中。

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

將 Firebase 新增至 JavaScript 應用程式前，請先建立 Firebase 專案，並向該專案註冊應用程式。向 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 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 'firebase/<service>';

// TODO: Replace the following with your app'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 Web SDK 的設計宗旨是搭配模組打包工具使用，以移除任何未使用的程式碼 (樹狀結構修剪)。我們強烈建議您為正式版應用程式採用這種做法。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。

後續步驟

瞭解 Firebase：