當您使用 Firebase 開發 Web 應用程序時，您可能會遇到不熟悉的概念，或者您需要更多信息來為您的項目做出正確決策的領域。此頁面旨在回答這些問題或為您提供資源以了解更多信息。
如果您有關於未涉及此頁主題的問題，請訪問我們的一個在線社區。我們還會定期使用新主題更新此頁面，因此請回來查看我們是否添加了您想了解的主題。
SDK 版本 8 和 9
Firebase 為 Web 應用程序提供了兩個 SDK 版本：
- 第8版這是JavaScript接口，火力地堡一直保持了好幾年，是熟悉的Web開發人員與現有火力地堡的應用程序。由於 Firebase 將在一個主要發布週期後取消對此版本的支持，因此新應用應改為採用版本 9。
- 模塊化版本9。該SDK引入了模塊化的方法是提供降低SDK的尺寸和更高的效率與現代的JavaScript構建工具，如的WebPack或匯總。
版本 9 與構建工具很好地集成，這些工具可以去除您的應用程序中未使用的代碼，這一過程稱為“搖樹”。使用此 SDK 構建的應用程序可大大減少佔用空間。版本 8 雖然作為模塊提供，但沒有嚴格的模塊化結構，也沒有提供相同程度的尺寸縮減。
儘管版本 9 SDK 的大部分遵循與版本 8 相同的模式，但代碼的組織是不同的。通常，版本 8 面向命名空間和服務模式，而版本 9 面向離散功能。例如，版本8的點鏈接，如firebaseApp.auth()由單個替換版本9 getAuth()函數，它接受firebaseApp和返回認證實例。
這意味著使用版本 8 或更早版本創建的 Web 應用程序需要重構才能利用版本 9 的模塊化方法。 Firebase 提供了兼容庫來簡化這種轉換；看到升級指南了解更多詳情。
支持什麼？
雖然版本 8 和版本 9 具有不同的代碼風格，但它們對 Firebase 功能和選項的支持非常相似。正如我們將在本指南中詳細描述的那樣，兩個 SDK 版本都支持 JavaScript 和 Node.js 變體以及用於添加/安裝 SDK 的幾個選項。
| 添加 SDK | 8.0（命名空間） | 9.0（模塊化） |
|---|---|---|
| 新產品經理 |
|
|
| CDN（內容交付網絡） |
|
|
| 託管 URL |
|
欲了解更多信息，請參閱方式到Web的SDK添加到您的應用程序和火力地堡網絡SDK變種後來此頁面上。
新應用程序的第 9 版
如果你開始與火力地堡一個新的整合，你可以選擇到第9版SDK，當你添加和初始化SDK 。
當你開發的應用程序，請記住，你的代碼會被周圍的功能主要組織。在版本 9 中，服務作為第一個參數傳遞，然後函數使用服務的詳細信息來完成剩下的工作。例如：
import { getAuth, onAuthStateChanged } from "firebase/auth";
const auth = getAuth(firebaseApp);
onAuthStateChanged(auth, user => {
// Check for user status
});
有關詳細的實施例和細節，請參見每個產品區域中的引導件以及該版本9參考文檔。
將 Web SDK 添加到您的應用程序的方法
Firebase 為大多數 Firebase 產品提供 JavaScript 庫，包括遠程配置、FCM 等。您如何將 Firebase SDK 添加到您的 Web 應用程序取決於您在應用程序中使用的工具（如模塊捆綁器），或者您的應用程序是否在非瀏覽器環境（如 Node.js）中運行。
您可以添加任意的可用庫通過的支持的方法，您的應用程序：
- npm（用於模塊打包器和 Node.js）
- CDN（內容分發網絡）
有關詳細的安裝說明，請參閱添加火力地堡到您的JavaScript應用程序。本節的其餘部分包含可幫助您從可用選項中進行選擇的信息。
新產品經理
下載 Firebase npm 包（包括瀏覽器和 Node.js 包）可為您提供 Firebase SDK 的本地副本，非瀏覽器應用程序（例如 Node.js 應用程序、React Native 或 Electron）可能需要它。下載包括 Node.js 和 React Native 包作為某些包的選項。 Node.js 包是 SSR 框架的服務器端渲染 (SSR) 步驟所必需的。
使用NPM與模塊的捆綁，如的WebPack或匯總提供優化選項，以“樹搖”無用的代碼和應用針對性polyfills，這樣可以大大降低您的應用程序的大小足跡。實現這些功能可能會給您的配置和構建鏈增加一些複雜性，但各種主流 CLI 工具可以幫助緩解這種情況。這些工具包括角，作出反應， Vue公司，然後和其他人。
總之：
- 提供有價值的應用程序大小優化
- 強大的工具可用於管理模塊
- 使用 Node.js 的 SSR 需要
CDN（內容分發網絡）
添加存儲在 Firebase 的 CDN 上的庫是許多開發人員可能熟悉的簡單 SDK 設置方法。使用 CDN 添加 SDK，您將不需要構建工具，並且與模塊捆綁器相比，您的構建鏈可能更簡單、更易於使用。如果您不是特別關心應用程序的安裝大小並且沒有特殊要求（例如從 TypeScript 轉譯），那麼 CDN 可能是一個不錯的選擇。
總之：
- 熟悉又簡單
- 適用於應用程序大小不是主要問題的情況
- 適用於您的網站不使用構建工具的情況。
Firebase Web SDK 變體
目前，Firebase 提供兩種 Web SDK 變體：
- 支持在瀏覽器中使用的所有 Firebase 功能的 JavaScript 包。
- 支持許多（但不是全部）Firebase 功能的客戶端 Node.js 包。見列表支持的環境。
這兩個 SDK 變體都旨在幫助構建 Web 應用程序或客戶端應用程序以供最終用戶訪問，例如在 Node.js 桌面或 IoT 應用程序中。如果你的目標是建立在特權環境（如服務器）管理訪問權限使用火力地堡管理SDK來代替。
使用捆綁器和框架進行環境檢測
使用 npm 安裝 Firebase Web SDK 時，會同時安裝 JavaScript 和 Node.js 版本。該軟件包提供了詳細的環境檢測，以便為您的應用程序啟用正確的包。
如果您的代碼使用Node.js的require陳述，該SDK發現的節點特定的捆綁。否則，你的捆綁的設置必須正確想通檢測您合適的切入點場package.json文件（例如， main ， browser ，或module ）。如果您在使用 SDK 時遇到運行時錯誤，請檢查以確保您的捆綁器配置為優先考慮適合您環境的正確類型的捆綁包。
了解 Firebase 配置對象
要在您的應用中初始化 Firebase，您需要提供應用的 Firebase 項目配置。你可以得到你的火力地堡配置對象在任何時間。
我們不建議手動編輯你的配置對象，特別是以下要求的“火力地堡選項”：
apiKey，projectId和appID。如果您使用這些必需的“Firebase 選項”的無效值或缺失值初始化您的應用程序，您的應用程序用戶可能會遇到嚴重問題。如果您在火力地堡項目啟用了谷歌分析，你的配置對象包含字段
measurementId。詳細了解此字段中Analytics入門頁面。
這是啟用所有服務的配置對象的格式（這些值會自動填充）：
// For Firebase JavaScript SDK v7.20.0 and later, `measurementId` is an optional field
var firebaseConfig = {
apiKey: "API_KEY",
authDomain: "PROJECT_ID.firebaseapp.com",
databaseURL: "https://PROJECT_ID.firebaseio.com",
projectId: "PROJECT_ID",
storageBucket: "PROJECT_ID.appspot.com",
messagingSenderId: "SENDER_ID",
appId: "APP_ID",
measurementId: "G-MEASUREMENT_ID",
};
可用庫
其他設置選項
延遲加載 Firebase SDK（來自 CDN）
您可以延遲包含 Firebase SDK，直到整個頁面加載完畢。如果您使用的版本9 CDN腳本與<script type="module"> ，這是默認的行為。如果您將版本 8 CDN 腳本用作模塊，請完成以下步驟以延遲加載：
一個加入
defer標誌各script的火力地堡的SDK標籤，然後用第二個腳本，例如推遲火力地堡的初始化：<script defer src="https://www.gstatic.com/firebasejs/8.10.0/firebase-app.js"></script> <script defer src="https://www.gstatic.com/firebasejs/8.10.0/firebase-auth.js"></script> <script defer src="https://www.gstatic.com/firebasejs/8.10.0/firebase-firestore.js"></script> // ... <script defer src="./init-firebase.js"></script>創建
init-firebase.js文件，那麼該文件中包括以下：// TODO: Replace the following with your app's Firebase project configuration var firebaseConfig = { // ... }; // Initialize Firebase firebase.initializeApp(firebaseConfig);
在單個應用中使用多個 Firebase 項目
在大多數情況下，您只需在單個默認應用中初始化 Firebase。您可以通過兩種等效方式從該應用訪問 Firebase：
網頁版 9
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();網頁版 8
// 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 配置信息。
網頁版 9
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);網頁版 8
// 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 服務器進行開發
如果您正在構建 Web 應用程序，Firebase JavaScript SDK 的某些部分要求您從服務器而不是從本地文件系統提供您的 Web 應用程序。您可以使用火力地堡CLI來運行本地服務器。
如果您已經為您的應用設置了 Firebase 託管，您可能已經完成了以下幾個步驟。
要為您的網絡應用提供服務，您將使用 Firebase CLI，一種命令行工具。
初始化您的 Firebase 項目。從本地應用程序目錄的根目錄運行以下命令：
firebase init
將您的本地應用目錄與 Firebase 相關聯
生成一個
firebase.json文件（用於火力地堡託管所需的文件）提示您指定一個公共根目錄，其中包含您的公共靜態文件（HTML、CSS、JS 等）
Firebase 查找的目錄的默認名稱是“public”。您還可以設置公共目錄後直接修改您的
firebase.json文件。
啟動本地服務器的發展。從本地應用程序目錄的根目錄運行以下命令：
firebase serve
Firebase JavaScript SDK 的開源資源
Firebase 支持開源開發，我們鼓勵社區貢獻和反饋。
Firebase JavaScript SDK
大多數火力地堡的JavaScript SDK的開發作為我們的公共開源庫火力地堡GitHub的倉庫。
快速入門示例
Firebase 為 Web 上的大多數 Firebase API 維護了一組快速入門示例。發現在我們的公共這些快速入門火力地堡GitHub的快速啟動庫。您可以將這些快速入門用作使用 Firebase SDK 的示例代碼。