Check out what’s new from Firebase at Google I/O 2022. Learn more

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

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

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

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

以下示例展示了如何使用 Cloud Firestore 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：