将 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 模块化 API（使用 JavaScript 模块格式）的设置说明。

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

    如果您的应用包含基于服务器端渲染 (SSR) 的动态功能，则需要执行一些额外的步骤，以确保您的配置在服务器渲染和客户端渲染阶段保持不变。在服务器逻辑中，实现 FirebaseServerApp 接口，以利用 Service Worker 优化应用的会话管理。

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

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

以下示例展示了如何使用 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 设计为可与模块打包器结合使用，用于移除任何未使用的代码（摇树优化）。对于正式版应用，我们强烈建议您使用此方法。对于通过 npm 安装并导入您的代码库的库，Angular CLI、Next.js、Vue CLI 或 Create React App 等工具会自动处理模块打包事宜。

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

面向 Web 的可用 Firebase 服务

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

以下命令演示了如何导入使用 npm 在本地安装的 Firebase 库。如需了解其他导入选项，请参阅可用的库文档。

后续步骤

了解 Firebase：