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 CLI 、 Next.js 、 Vue CLI或Create React App等工具自动处理通过 npm 安装并导入到代码库中的库的模块捆绑。

有关详细信息，请参阅我们的指南将模块捆绑器与 Firebase 结合使用。

适用于 Web 的可用 Firebase 服务

现在您已设置好使用 Firebase，您可以开始在您的 Web 应用程序中添加和使用以下任何可用的 Firebase 服务。

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

下一步

了解 Firebase：