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

将 Firebase 添加到您的 JavaScript 项目

请按照本指南中的说明,在您的 Web 应用中使用 Firebase JavaScript SDK,或者将其用作客户端以供最终用户访问(例如,在 Node.js 桌面应用或 IoT 应用中)。

第 1 步:创建 Firebase 项目并注册应用

您需要先创建一个 Firebase 项目,并在该项目中注册您的应用,然后才能将 Firebase 添加到您的 JavaScript 应用。在 Firebase 中注册应用后,您将获得一个 Firebase 配置对象,该对象用于将您的应用与 Firebase 项目资源相关联。

如需详细了解 Firebase 项目以及将应用添加到项目的最佳做法,请访问了解 Firebase 项目

如果您还没有 JavaScript 项目,只是想试用某一 Firebase 产品,则可以下载我们的某个快速入门示例

第 2 步:安装 SDK 并初始化 Firebase

本页面介绍 Firebase JS SDK 版本 9(使用 JavaScript 模块格式)的设置说明。

此工作流使用 npm,并且需要模块打包器或 JavaScript 框架工具,因为 v9 SDK 经过了优化,可与模块打包器配合使用,以消除未使用的代码(摇树优化)并缩减 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 服务。

第 3 步:在您的应用中访问 Firebase

可以在各个子软件包中导入 Firebase 服务(如 Cloud Firestore、Authentication、Realtime Database、Remote Config 等)。

以下示例展示了如何使用 Cloud Firestore 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 设计为可与模块打包器结合使用,用于移除任何未使用的代码(摇树优化)。对于生产应用,我们强烈建议您使用此方法。对于通过 npm 安装并导入您的代码库的库,Angular CLINext.jsVue CLICreate React App 等工具会自动处理模块打包事宜。

如需了解详情,请参阅我们的将模块打包器与 Firebase 搭配使用指南。

面向 Web 的可用 Firebase 服务

现在您已经进行了相应设置,可以使用 Firebase 了,接下来可以开始在 Web 应用中添加并使用以下任一可用的 Firebase 服务。

后续步骤

了解 Firebase: