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

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

此工作流使用 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,您可以开始在您的网络应用中添加和使用以下任何可用的 Firebase 服务。

以下命令显示如何导入使用npm本地安装的 Firebase 库。有关替代导入选项,请参阅可用的库文档

下一步

了解 Firebase: