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

有关更多信息，请参阅我们的指南将模块捆绑器与 Firebase一起使用。

适用于 Web 的可用 Firebase 服务

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

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

下一步

了解 Firebase：