將 Firebase 新增至您的 JavaScript 專案

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

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

如要將 Firebase 新增到 JavaScript 應用程式，請先建立 Firebase 專案，然後向該專案註冊應用程式。當您註冊 應用程式，藉此取得 Firebase 設定物件 連結應用程式與 Firebase 專案資源

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

如果您還沒有 JavaScript 專案，只想試用 Firebase 產品，您可以下載其中一個快速入門導覽課程範例。

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

本頁面說明 Firebase JS SDK 模組化 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 免費 Google Cloud 服務

    如果應用程式包含採用伺服器端轉譯 (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 自動回應應用程式 為透過 npm 安裝並匯入至 程式碼集

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

可用的 Firebase 服務網頁版

設定完成使用 Firebase 後，即可開始新增並使用 下列可用的 Firebase 服務。

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

後續步驟

瞭解 Firebase：