Google 致力于为黑人社区推动种族平等。查看具体举措

將 Firebase 添加到您的 JavaScript 項目

按照本指南在您的 Web 應用程序中使用 Firebase JavaScript SDK 或作為最終用戶訪問的客戶端,例如在 Node.js 桌面或 IoT 應用程序中。

第 1 步:創建一個 Firebase 項目並註冊您的應用

在將 Firebase 添加到 JavaScript 應用程序之前,您需要創建一個 Firebase 項目並向該項目註冊您的應用程序。當您向 Firebase 註冊您的應用程序時,您將獲得一個 Firebase 配置對象,您將使用該對象將您的應用程序與 Firebase 項目資源連接起來。

訪問了解 Firebase 項目以了解有關 Firebase 項目的更多信息以及將應用程序添加到項目的最佳實踐。

如果您還沒有 JavaScript 項目而只是想試用 Firebase 產品,則可以下載我們的快速入門示例之一。

第 2 步:安裝 SDK 並初始化 Firebase

本頁介紹了使用JavaScript 模塊格式的 Firebase JS SDK 版本 9 的設置說明。

此工作流使用 npm 並需要模塊捆綁器或 JavaScript 框架工具,因為 v9 SDK 經過優化以與模塊捆綁器一起使用以消除未使用的代碼(搖樹優化)並減小 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 project configuration
    const firebaseConfig = {
      //...
    };
    
    const app = initializeApp(firebaseConfig);
    

    Firebase 應用程序是一個類似容器的對象,它存儲通用配置並在 Firebase 服務之間共享身份驗證。在代碼中初始化 Firebase App 對像後,您可以添加並開始使用 Firebase 服務。

第 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 CLINext.jsVue CLICreate React App 等工具自動處理通過 npm 安裝並導入到代碼庫中的庫的模塊捆綁。

有關詳細信息,請參閱我們的指南將模塊捆綁器與 Firebase 結合使用

適用於 Web 的可用 Firebase 服務

現在您已設置好使用 Firebase,您可以開始在您的 Web 應用程序中添加和使用以下任何可用的 Firebase 服務。

以下命令顯示如何使用npm導入本地安裝的 Firebase 庫。有關替代導入選項,請參閱可用的庫文檔

下一步

了解 Firebase:

,

按照本指南在您的 Web 應用程序中使用 Firebase JavaScript SDK 或作為最終用戶訪問的客戶端,例如在 Node.js 桌面或 IoT 應用程序中。

第 1 步:創建一個 Firebase 項目並註冊您的應用

在將 Firebase 添加到 JavaScript 應用程序之前,您需要創建一個 Firebase 項目並向該項目註冊您的應用程序。當您向 Firebase 註冊您的應用程序時,您將獲得一個 Firebase 配置對象,您將使用該對象將您的應用程序與 Firebase 項目資源連接起來。

訪問了解 Firebase 項目以了解有關 Firebase 項目的更多信息以及將應用程序添加到項目的最佳實踐。

如果您還沒有 JavaScript 項目而只是想試用 Firebase 產品,則可以下載我們的快速入門示例之一。

第 2 步:安裝 SDK 並初始化 Firebase

本頁介紹了使用JavaScript 模塊格式的 Firebase JS SDK 版本 9 的設置說明。

此工作流使用 npm 並需要模塊捆綁器或 JavaScript 框架工具,因為 v9 SDK 經過優化以與模塊捆綁器一起使用以消除未使用的代碼(搖樹優化)並減小 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 project configuration
    const firebaseConfig = {
      //...
    };
    
    const app = initializeApp(firebaseConfig);
    

    Firebase 應用程序是一個類似容器的對象,它存儲通用配置並在 Firebase 服務之間共享身份驗證。在代碼中初始化 Firebase App 對像後,您可以添加並開始使用 Firebase 服務。

第 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 CLINext.jsVue CLICreate React App 等工具自動處理通過 npm 安裝並導入到代碼庫中的庫的模塊捆綁。

有關詳細信息,請參閱我們的指南將模塊捆綁器與 Firebase 結合使用

適用於 Web 的可用 Firebase 服務

現在您已設置好使用 Firebase,您可以開始在您的 Web 應用程序中添加和使用以下任何可用的 Firebase 服務。

以下命令顯示如何使用npm導入本地安裝的 Firebase 庫。有關替代導入選項,請參閱可用的庫文檔

下一步

了解 Firebase: