使用 Firebase 開發網頁應用程式時，您可能會遇到不熟悉的概念，或是需要更多資訊才能為專案做出正確決策的領域。本頁面旨在解答這些問題，或為您提供更多學習資源。
如果對本頁未提及的主題有疑問，請前往線上社群。我們也會定期更新這個頁面，新增主題，因此請隨時返回查看是否有您想瞭解的主題。
SDK 版本：具命名空間和模組化
Firebase 為網頁應用程式提供兩項 API 介面：
- JavaScript - 命名空間。 這是 Firebase 維護多年的 JavaScript 介面，使用舊版 Firebase 應用程式的網頁開發人員應該很熟悉。由於命名空間 API 無法享有持續的新功能支援，因此大多數新應用程式應改用模組化 API。
- JavaScript - 模組化。這個 SDK 採用模組化方法，可縮減 SDK 大小，並搭配 webpack 或 Rollup 等現代 JavaScript 建構工具，提升效率。
模組化 API 可與建構工具完美整合，從應用程式中移除未使用的程式碼，這個程序稱為「樹狀結構修剪」。使用這個 SDK 建構的應用程式，可大幅減少大小。雖然命名空間 API 可以作為模組使用，但它沒有嚴格的模組化結構，也無法提供相同程度的尺寸縮減。
雖然大多數模組化 API 遵循與命名空間 API 相同的模式，但程式碼的組織方式不同。一般來說，命名空間 API 面向命名空間和服務模式，而模組化 API 面向離散功能。舉例來說，模組化 API 會以單一 getAuth() 函式取代命名空間 API 的點鏈結 (例如 firebaseApp.auth())，該函式會採用 firebaseApp 並傳回 Authentication 例項。
也就是說，使用命名空間 API 建立的網頁應用程式需要重構，才能採用模組化應用程式設計。詳情請參閱升級指南。
JavaScript - 適用於新應用程式的模組化 API
如果您要開始與 Firebase 進行新的整合，可以在新增及初始化 SDK 時選擇使用模組化 API。
開發應用程式時，請記住程式碼主要會圍繞函式來組織。在模組化 API 中，服務作為第一個參數傳遞，然後函數使用服務的詳細資訊來完成其餘操作。 例如：
import { getAuth, onAuthStateChanged } from "firebase/auth";
const auth = getAuth(firebaseApp);
onAuthStateChanged(auth, user => {
// Check for user status
});
有關更多範例和詳細信息，請參閱每個產品領域的指南以及模組化 API 參考文件。
將 Web SDK 新增至應用程式的方法
Firebase 為大多數 Firebase 產品提供 JavaScript 程式庫，包括 Remote Config、FCM 等。將 Firebase SDK 新增至網頁應用程式的方式，取決於您在應用程式中使用的工具 (例如模組打包器)。
您可以透過其中一種支援的方法，將可用程式庫新增至應用程式：
- npm (適用於模組打包工具)
- CDN (內容傳遞聯播網)
如需詳細設定操作說明，請參閱「將 Firebase 新增至 JavaScript 應用程式」。本節其餘內容將說明如何從可用選項中進行選擇。
npm
下載 Firebase npm 套件 (包含瀏覽器和 Node.js 組合) 後，您會取得 Firebase SDK 的本機副本，這可能適用於非瀏覽器應用程式，例如 Node.js 應用程式、React Native 或 Electron。下載包中包含 Node.js 和 React Native 包，部分軟體包可選擇安裝這些包。Node.js 套件是 SSR 框架的伺服器端渲染 (SSR) 步驟所必需的。
搭配使用 npm 和 webpack 或 Rollup 等模組打包工具，可提供最佳化選項，以便「樹狀結構化」未使用的程式碼，並套用目標修補程式，大幅縮減應用程式的大小。實作這些功能可能會增加設定和建構鏈的複雜度，但各種主流 CLI 工具可協助減輕這類問題。這些工具包括 Angular、React、Vue、Next 等。
簡單來說：
- 提供有價值的應用程式大小最佳化
- 有強大的工具可用於管理模組。
- 使用 Node.js 進行伺服器端算繪時的必要條件
CDN（內容傳遞網路）
添加儲存在 Firebase CDN 上的庫是一種簡單的 SDK 設定方法，許多開發人員可能對此很熟悉。使用 CDN 新增 SDK，您無需建置工具，與模組打包器相比，您的建置鏈可能會更簡單、更容易使用。 如果您不太在意應用程式的安裝大小，也沒有從 TypeScript 轉譯等特殊要求，那麼 CDN 可能是個不錯的選擇。
簡單來說：
- 熟悉且簡單
- 當應用大小不是主要考慮因素時，這種方法比較適合。
- 適用於您的網站未使用建置工具的情況。
Firebase Web SDK 變體
Firebase 的 Web SDK 既可用於瀏覽器應用程序，也可用於 Node 應用程式。 然而，部分產品在 Node 環境下無法使用。 請參閱 個受支援環境的清單。
有些產品 SDK 提供單獨的瀏覽器和 Node 版本，每個版本都以 ESM 和 CJS 格式提供，有些產品 SDK 甚至提供 Cordova 或 React Native 版本。Web SDK 已配置為根據您的工具配置或環境提供正確的變體，在大多數情況下不需要手動選擇。所有 SDK 變體都旨在幫助建立供最終用戶訪問的 Web 應用程式或客戶端應用程序，例如 Node.js 桌面應用程式或 IoT 應用程式。如果您的目標是從特權環境（例如伺服器）設定管理存取權限，請改用 Firebase Admin SDK。
使用打包工具和框架進行環境檢測
使用 npm 安裝 Firebase Web SDK 時，JavaScript 和 Node.js 版本都會被安裝。該軟體包提供詳細的環境檢測功能，以便為您的應用程式啟用正確的軟體包。
如果你的程式碼使用了 Node.js require 語句，SDK 會找到 Node 特有的套件。否則，您的打包工具必須正確配置，才能偵測到 package.json 檔案中的正確入口點欄位（例如，main、browser 或 module）。如果您在使用 SDK 時遇到執行階段錯誤，請檢查您的打包工具是否已配置為優先處理適合您環境的正確類型的套件。
瞭解 Firebase 配置對象
若要在您的應用程式中初始化 Firebase，您需要提供套用的 Firebase 配置。您可以隨時取得您的 Firebase 設定物件。
我們不建議手動編輯您的配置對象，尤其是以下必要的「Firebase 選項」：
apiKey、projectId和appID。如果您在初始化應用程式時使用了無效或缺少的必要「Firebase 選項」值，則您的應用程式使用者可能會遇到嚴重問題。 但authDomain例外，您可以按照使用 signInWithRedirect 的最佳做法更新這個屬性。如果您在 Firebase 專案中啟用了 Google Analytics，則您的設定物件包含欄位
measurementId。請在 Analytics 入門頁面 中瞭解有關此欄位的更多資訊。如果您啟用Google Analytics或者Realtime Database 後建立 Firebase Web 應用程式時，請確保應用程式中使用的 Firebase 設定物件已使用關聯的配置值進行更新（
measurementId和databaseURL， 分別）。您可以隨時取得您的 Firebase 設定物件。
以下是啟用所有服務的設定物件格式 (系統會自動填入這些值)：
var firebaseConfig = { apiKey: "API_KEY", authDomain: "PROJECT_ID.firebaseapp.com", // The value of `databaseURL` depends on the location of the database databaseURL: "https://DATABASE_NAME.firebaseio.com", projectId: "PROJECT_ID", // The value of `storageBucket` depends on when you provisioned your default bucket (learn more) storageBucket: "", messagingSenderId: "SENDER_ID", appId: "APP_ID", // For Firebase JavaScript SDK v7.20.0 and later, `measurementId` is an optional field measurementId: "G-MEASUREMENT_ID", }; PROJECT_ID.firebasestorage.app
可用的程式庫
其他設定選項
延遲載入 Firebase SDK（來自 CDN）
您可以延遲引入 Firebase SDK，直到整個頁面加載完成。如果您使用帶有 <script type="module"> 的模組化 API CDN 腳本，這是預設行為。如果您將命名空間 CDN 腳本用作模組，請完成以下步驟以延遲載入：
添加一個
defer每個旗幟script為 Firebase SDK 新增標籤，然後使用第二個腳本延遲 Firebase 的初始化，例如：<script defer src="https://www.gstatic.com/firebasejs/8.10.1/firebase-app.js"></script> <script defer src="https://www.gstatic.com/firebasejs/8.10.1/firebase-auth.js"></script> <script defer src="https://www.gstatic.com/firebasejs/8.10.1/firebase-firestore.js"></script> // ... <script defer src="./init-firebase.js"></script>建立一個名為
init-firebase.js的文件，然後在該文件中包含以下內容：// TODO: Replace the following with your app's Firebase configuration var firebaseConfig = { // ... }; // Initialize Firebase firebase.initializeApp(firebaseConfig);
在單一應用程式中使用多個 Firebase 項目
大多數情況下，您只需在一個預設應用程式中初始化 Firebase。您可以透過兩種等效的方式從該應用程式存取 Firebase：
Web
import { initializeApp } from "firebase/app"; import { getStorage } from "firebase/storage"; import { getFirestore } from "firebase/firestore"; // Initialize Firebase with a "default" Firebase project const defaultProject = initializeApp(firebaseConfig); console.log(defaultProject.name); // "[DEFAULT]" // Option 1: Access Firebase services via the defaultProject variable let defaultStorage = getStorage(defaultProject); let defaultFirestore = getFirestore(defaultProject); // Option 2: Access Firebase services using shorthand notation defaultStorage = getStorage(); defaultFirestore = getFirestore();
Web
// Initialize Firebase with a "default" Firebase project const defaultProject = firebase.initializeApp(firebaseConfig); console.log(defaultProject.name); // "[DEFAULT]" // Option 1: Access Firebase services via the defaultProject variable let defaultStorage = defaultProject.storage(); let defaultFirestore = defaultProject.firestore(); // Option 2: Access Firebase services using shorthand notation defaultStorage = firebase.storage(); defaultFirestore = firebase.firestore();
但有時，您需要同時存取多個 Firebase 專案。例如，您可能想要從一個 Firebase 專案的資料庫中讀取數據，但將檔案儲存在另一個 Firebase 專案中。或者，您可能想驗證一個專案，同時讓第二個專案保持未驗證狀態。
Firebase JavaScript SDK 可讓您在單一應用程式中同時初始化及使用多個 Firebase 專案，每個專案都會使用自己的 Firebase 設定資訊。
Web
import { initializeApp, getApp } from "firebase/app"; import { getStorage } from "firebase/storage"; import { getFirestore } from "firebase/firestore"; // Initialize Firebase with a default Firebase project initializeApp(firebaseConfig); // Initialize Firebase with a second Firebase project const otherProject = initializeApp(otherProjectFirebaseConfig, "other"); console.log(getApp().name); // "[DEFAULT]" console.log(otherProject.name); // "otherProject" // Use the shorthand notation to access the default project's Firebase services const defaultStorage = getStorage(); const defaultFirestore = getFirestore(); // Use the otherProject variable to access the second project's Firebase services const otherStorage = getStorage(otherProject); const otherFirestore = getFirestore(otherProject);
Web
// Initialize Firebase with a default Firebase project firebase.initializeApp(firebaseConfig); // Initialize Firebase with a second Firebase project const otherProject = firebase.initializeApp(otherProjectFirebaseConfig, "other"); console.log(firebase.app().name); // "[DEFAULT]" console.log(otherProject.name); // "otherProject" // Use the shorthand notation to access the default project's Firebase services const defaultStorage = firebase.storage(); const defaultFirestore = firebase.firestore(); // Use the otherProject variable to access the second project's Firebase services const otherStorage = otherProject.storage(); const otherFirestore = otherProject.firestore();
運行本機 Web 伺服器進行開發
如果您要建構網頁應用程式，Firebase JavaScript SDK 的某些部分會要求您從伺服器 (而非本機檔案系統) 提供網頁應用程式。您可以使用 Firebase CLI 執行本機伺服器。
如果您已為應用程式設定 Firebase Hosting，可能已完成下列幾個步驟。
如要提供網頁應用程式，請使用指令列工具 Firebase CLI。
初始化 Firebase 專案。 在本機應用程式目錄的根目錄下執行以下命令：
firebase init
啟動本機伺服器進行開發。在本機應用程式目錄的根目錄中執行下列指令：
firebase serve
Firebase JavaScript SDK 的開放原始碼資源
Firebase 支援開放原始碼開發，並鼓勵社群提供貢獻和意見回饋。
Firebase JavaScript SDK
大多數 Firebase JavaScript SDK 都是在公開的 Firebase GitHub 存放區中，以開放原始碼程式庫的形式開發。
快速入門範例
Firebase 為大多數 Web 端 Firebase API 維護了一系列快速入門範例。您可以在公開的 Firebase GitHub 快速入門存放區中找到這些快速入門指南。您可以將這些快速入門指南用作使用 Firebase SDK 的範例程式碼。