將 Firebase 新增至您的 JavaScript 專案

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

步驟 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 應用程式物件：

    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 應用程式物件後，您就可以新增並開始使用 Firebase 服務。

    如果應用程式包含基於伺服器端轉譯 (SSR) 的動態功能，則需要採取一些額外的步驟，才能確保相關設定在伺服器轉譯和用戶端算繪之間持續有效。在伺服器邏輯中實作 FirebaseServerApp 介面，最佳化應用程式的使用服務工作站的工作階段管理。

步驟 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 CLI、Next.js、Vue CLI 或 Create React App 等工具都會自動為透過 npm 安裝的程式庫處理模組組合，並匯入至程式碼集。

詳情請參閱「搭配 Firebase 使用模組組合工具」指南。

可用的 Firebase 服務網頁版

現在您已設定好使用 Firebase，即可開始在網頁應用程式中加入並使用下列任一 Firebase 服務。

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

後續步驟

瞭解 Firebase：