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: