将 Firebase 添加到您的 JavaScript 项目

请按照本指南中的说明，在您的 Web 应用中使用 Firebase JavaScript SDK，或者将其用作客户端以供最终用户访问（例如，在 Node.js 桌面应用或 IoT 应用中）。

准备工作

安装您的首选编辑器或 IDE。
打开 JavaScript 项目（Web 或 Node.js）。
使用您的 Google 帐号登录 Firebase。

如果您还没有 JavaScript 项目，可以下载一个我们的快速入门示例来试用 Firebase。

第 1 步：创建 Firebase 项目

您需要先创建一个要关联到您应用的 Firebase 项目，然后才能将该 Firebase 添加到您的 JavaScript 应用。

如需详细了解 Firebase 项目以及将应用添加到项目的最佳做法，请访问了解 Firebase 项目。

创建 Firebase 项目

在 Firebase 控制台中，点击添加项目，然后选择或输入项目名称。

如果您已经拥有一个 Google Cloud Platform (GCP) 项目，则可以从项目名称下拉菜单中选择该项目。否则，请输入新的项目名称。
（可选）修改项目 ID。

Firebase 会自动为您的 Firebase 项目分配一个唯一 ID。访问了解 Firebase 项目以了解 Firebase 如何使用该项目 ID。

Firebase 为您的 Firebase 项目预配好资源后，您将无法再更改项目 ID。
因此，若要使用特定标识符，就必须在此设置步骤修改项目 ID。
在 Firebase 控制台中完成剩下的设置步骤，然后点击创建项目（如果您使用的是现有 Google 项目，则点击添加 Firebase）。

Firebase 会自动为您的 Firebase 项目预配资源。完成此过程后，您将进入 Firebase 控制台中 Firebase 项目的概览页面。

第 2 步：注册您的应用

有了 Firebase 项目后，您就可以将自己的 Web 应用添加到其中了。

如需详细了解将应用添加到 Firebase 项目的最佳做法和注意事项，请访问了解 Firebase 项目。

在 Firebase 控制台的项目概览页面中，点击 Web 图标 () 以启动设置工作流。

如果您已向 Firebase 项目添加了应用，请点击添加应用以显示平台选项。
输入应用的别名。

别名是方便内部使用的标识符，只有您能在 Firebase 控制台中看到。
（可选）为您的 Web 应用设置 Firebase 托管。
- 您可以现在就设置 Firebase 托管，也可以稍后再设置。您还可以随时在项目设置中将您的 Firebase Web 应用关联到托管网站。
- 如果您选择现在立即设置托管，请从下拉列表中选择一个要与您的 Firebase Web 应用相关联的网站。
  - 此列表显示您项目的默认托管网站，以及您在项目中设置的任何其他网站。
  - 已关联某个 Firebase Web 应用的网站将无法再关联其他应用。每个托管网站只能关联一个 Firebase Web 应用。
注意：要将 Firebase 产品与您的 Web 应用搭配使用，Firebase 托管并非必要设置。
点击注册应用。

第 3 步：添加 Firebase SDK 并初始化 Firebase

您可以将任何受支持的 Firebase 产品添加到您的应用中。

以哪种方式向您的应用添加 Firebase SDK，取决于您是否选择为应用使用 Firebase 托管、要与应用搭配使用的工具（如捆绑器）或是否配置了 Node.js 应用。

从托管网址添加

使用 Firebase 托管时，您可以将应用配置为从预留的网址动态加载 Firebase JavaScript SDK 库。请详细了解如何通过预留的托管网址添加 SDK。

通过此设置选项，在您将应用部署到 Firebase 后，应用会从您部署到的 Firebase 项目中自动拉取 Firebase 配置对象。您可以将同一代码库部署到多个 Firebase 项目，但不必跟踪用于 firebase.initializeApp() 的 Firebase 配置。

此设置选项也适用于在本地测试您的 Web 应用。

若要仅添加特定 Firebase 产品（例如身份验证和 Cloud Firestore），请在使用任何 Firebase 服务之前将以下脚本添加到 <body> 标记的最下面：

<body>
  <!-- Insert these scripts at the bottom of the HTML, but before you use any Firebase services -->

  <!-- Firebase App (the core Firebase SDK) is always required and must be listed first -->
  <script src="/__/firebase/6.2.0/firebase-app.js"></script>

  <!-- Add Firebase products that you want to use -->
  <script src="/__/firebase/6.2.0/firebase-auth.js"></script>
  <script src="/__/firebase/6.2.0/firebase-firestore.js"></script>
</body>

请添加整个 Firebase JavaScript SDK，而不是个别添加 SDK（不建议用于生产应用）

  <body>
    <!-- Insert this script at the bottom of the HTML, but before you use any Firebase services -->

    <!-- Add the entire Firebase JavaScript SDK -->
    <script src="/__/firebase/6.2.0/firebase.js"></script>
  <body>

在您的应用中初始化 Firebase（如果使用预留的托管网址，则无需添加 Firebase 配置对象）：

<body>
  <!-- Previously loaded Firebase SDKs -->

  <!-- Initialize Firebase -->
  <script src="/__/firebase/init.js"></script>
</body>

从 CDN 添加

您可将 Firebase JavaScript SDK 配置为部分导入，仅加载您需要的 Firebase 产品。Firebase 将各 Firebase JavaScript SDK 库存储在我们的全球 CDN（内容分发网络）上。

若要仅添加特定 Firebase 产品（例如身份验证和 Cloud Firestore），请在使用任何 Firebase 服务之前将以下脚本添加到 <body> 标记的最下面：

<body>
  <!-- Insert these scripts at the bottom of the HTML, but before you use any Firebase services -->

  <!-- Firebase App (the core Firebase SDK) is always required and must be listed first -->
  <script src="https://www.gstatic.com/firebasejs/6.2.0/firebase-app.js"></script>

  <!-- Add Firebase products that you want to use -->
  <script src="https://www.gstatic.com/firebasejs/6.2.0/firebase-auth.js"></script>
  <script src="https://www.gstatic.com/firebasejs/6.2.0/firebase-firestore.js"></script>
</body>

请添加整个 Firebase JavaScript SDK，而不是个别添加 SDK（不建议用于生产应用）

  <body>
    <!-- Insert this script at the bottom of the HTML, but before you use any Firebase services -->

    <!-- Add the entire Firebase JavaScript SDK -->
    <script src="https://www.gstatic.com/firebasejs/6.2.0/firebase.js"></script>
  </body>

在您的应用中初始化 Firebase：

<body>
  <!-- Previously loaded Firebase SDKs -->

  <script>
    // TODO: Replace the following with your app's Firebase project configuration
    var firebaseConfig = {
      // ...
    };

    // Initialize Firebase
    firebase.initializeApp(firebaseConfig);
  </script>
</body>

使用模块捆绑器添加

您可将 Firebase JavaScript SDK 配置为部分导入，仅加载您需要的 Firebase 产品。如果您使用的是捆绑器（如 Browserify 或 webpack），则可以在需要时使用 import 导入单个 Firebase 产品。

安装 Firebase JavaScript SDK：
1. 如果还没有 package.json 文件，请从 JavaScript 项目的根目录运行以下命令来创建一个：
```
npm init
```
2. 运行以下命令，安装 firebase npm 软件包并将其保存到 package.json 文件：
```
npm install --save firebase
```

若要仅添加特定 Firebase 产品（如身份验证和 Cloud Firestore），请使用 import 导入 Firebase 模块：

// Firebase App (the core Firebase SDK) is always required and must be listed first
import * as firebase from "firebase/app";

// Add the Firebase products that you want to use
import "firebase/auth";
import "firebase/firestore";

在您的应用中初始化 Firebase：

// TODO: Replace the following with your app's Firebase project configuration
const firebaseConfig = {
  // ...
};

// Initialize Firebase
firebase.initializeApp(firebaseConfig);

Node.js 应用

安装 Firebase JavaScript SDK：
1. 如果您还没有 package.json 文件，请从 JavaScript 项目的根目录运行以下命令来创建一个：
```
npm init
```
2. 运行以下命令，安装 firebase npm 软件包并将其保存到 package.json 文件：
```
npm install --save firebase
```
使用以下任一选项，在您的应用中使用 Firebase 模块：
- 您可以使用 require 从任何 JavaScript 文件获取模块
  
  若要仅添加特定 Firebase 产品（如身份验证和 Cloud Firestore），请运行以下命令：
```
// Firebase App (the core Firebase SDK) is always required and
// must be listed before other Firebase SDKs
var firebase = require("firebase/app");

// Add the Firebase products that you want to use
require("firebase/auth");
require("firebase/firestore");
```
  请添加整个 Firebase JavaScript SDK，而不是个别添加 SDK（不建议用于生产应用）
  
  对于 Web 生产应用，加载整个 SDK 费时且低效。
  此选项仅适用于开发目的。
```
var firebase = require("firebase");
```
- 您可以使用 ES2015 通过 import 导入模块
  
  若要仅添加特定 Firebase 产品（如身份验证和 Cloud Firestore），请运行以下命令：
```
// Firebase App (the core Firebase SDK) is always required and
// must be listed before other Firebase SDKs
import * as firebase from "firebase/app";

// Add the Firebase services that you want to use
import "firebase/auth";
import "firebase/firestore";
```
  请添加整个 Firebase JavaScript SDK，而不是个别添加 SDK（不建议用于生产应用）
  
  对于 Web 生产应用，加载整个 SDK 费时且低效。
  此选项仅适用于开发目的。
```
import firebase from "firebase";
```
  注意：将 import 语法直接用于 Node.js 的功能尚处于实验阶段，但您可以使用 Babel 等编译器转换为 CommonJS 格式（require 语法）。

在您的应用中初始化 Firebase：

// TODO: Replace the following with your app's Firebase project configuration
var firebaseConfig = {
  // ...
};

// Initialize Firebase
firebase.initializeApp(firebaseConfig);

Firebase 配置对象

要在您的应用中初始化 Firebase，您需要提供应用的 Firebase 项目配置。

如果您使用预留的托管网址，系统会从您的项目中自动拉取 Firebase 配置，因此您无需在代码中隐式提供该对象。

var firebaseConfig = {
  apiKey: "api-key",
  authDomain: "project-id.firebaseapp.com",
  databaseURL: "https://project-id.firebaseio.com",
  projectId: "project-id",
  storageBucket: "project-id.appspot.com",
  messagingSenderId: "sender-id",
  appID: "app-id",
};

您可以随时获取 Firebase 配置对象。

第 4 步：（可选）安装 CLI 并部署到 Firebase 托管

如果您已将 Firebase Web 应用与 Firebase 托管网站关联，则可以现在（即设置 Web 应用时）就部署网站内容并进行配置，也可以日后再进行部署和配置。

要部署到 Firebase，请使用 Firebase CLI 命令行工具。安装 CLI 或将其更新为最新版本。

从计算机的任意位置运行以下 npm 命令：
```
npm install -g firebase-tools
```
注意：如果命令失败，请查看详细的 CLI 安装说明。
登录 Google。运行以下命令：
```
firebase login
```
此命令将您的本地机器与 Firebase 关联，并授予您对 Firebase 项目的访问权限。
初始化您的 Firebase 项目。从本地应用目录的根目录运行以下命令：
```
firebase init
```
此初始化命令会：
- 将您的本地应用目录与 Firebase 关联。
- 生成一个 firebase.json 文件（Firebase 托管所需的必要文件）。
- 提示您指定一个包含您的公共静态文件（HTML、CSS、JS 等）的公共根目录。
  
  Firebase 所要查找的该目录的默认名称为“public”。您也可以通过直接修改 firebase.json 文件的方式来稍后设置公共目录。
将您的内容和托管配置部署到 Firebase 托管。
默认托管网站
默认情况下，每个 Firebase 项目在 web.app 和 firebaseapp.com 网域上都有免费的子网域（project-id.web.app 和 project-id.firebaseapp.com）。
1. 部署到您的网站。从应用的根目录运行以下命令：
```
firebase deploy
```
2. 在以下任一默认网站上查看您的网站：
  - project-id.web.app
  - project-id.firebaseapp.com
非默认托管网站
Firebase 项目支持多个网站（这些网站被视为您的非默认网站）。您可以在控制台的 Web 应用设置工作流中为您的项目添加其他网站，也可以从控制台的托管页面添加。

下面提供的快速入门说明仅适用于初始开发。对于生产应用，请按照为其他网站设置部署的最佳做法执行操作。
1. 将网站添加到您的 firebase.json 文件（firebase init 期间创建的文件）。
  
  请注意，此 firebase.json 配置假设您的每个网站都有单独的代码库。
```
{
  "hosting": {
    "site": "site-name>",
    "public": "public",

    // ...
  }
}
```
2. 部署到您的网站。从应用的根目录运行以下命令：
```
firebase deploy --only hosting:site-name
```
3. 在以下任一网站上查看您的网站：
  - site-name.web.app
  - site-name.firebaseapp.com

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

Firebase JavaScript SDK 支持以下 Firebase 产品。每个产品都是可选的，并且可从 firebase 命名空间访问。

如需了解可用的方法，请参阅 Firebase JavaScript 参考文档。

Firebase 产品	命名空间	Web	Node.js
身份验证	`firebase.auth()`
Cloud Firestore	`firebase.firestore()`
Cloud Functions for Firebase 客户端 SDK	`firebase.functions()`
云消息传递	`firebase.messaging()`
Cloud Storage	`firebase.storage()`
性能监控（测试版）	`firebase.performance()`
实时数据库	`firebase.database()`

可用的库

可用的 Firebase JS SDK（来自预留的托管网址）

Firebase 产品	库参考（预留网址）
Firebase 核心（必需）	<script src="/__/firebase/6.2.0/firebase-app.js"></script>
身份验证	<script src="/__/firebase/6.2.0/firebase-auth.js"></script>
Cloud Firestore	<script src="/__/firebase/6.2.0/firebase-firestore.js"></script>
Cloud Functions for Firebase 客户端 SDK	<script src="/__/firebase/6.2.0/firebase-functions.js"></script>
云消息传递	<script src="/__/firebase/6.2.0/firebase-messaging.js"></script>
Cloud Storage	<script src="/__/firebase/6.2.0/firebase-storage.js"></script>
性能监控（测试版）	<script src="/__/firebase/6.2.0/firebase-performance.js"></script>
实时数据库	<script src="/__/firebase/6.2.0/firebase-database.js"></script>
Firebase JavaScript SDK （整个 SDK）	<script src="/__/firebase/6.2.0/firebase.js"></script>

可用的 Firebase JS SDK（来自 CDN）

Firebase 产品	库参考
Firebase 核心（必需）	<script src="https://www.gstatic.com/firebasejs/6.2.0/firebase-app.js"></script>
身份验证	<script src="https://www.gstatic.com/firebasejs/6.2.0/firebase-auth.js"></script>
Cloud Firestore	<script src="https://www.gstatic.com/firebasejs/6.2.0/firebase-firestore.js"></script>
Cloud Functions for Firebase 客户端 SDK	<script src="https://www.gstatic.com/firebasejs/6.2.0/firebase-functions.js"></script>
云消息传递	<script src="https://www.gstatic.com/firebasejs/6.2.0/firebase-messaging.js"></script>
Cloud Storage	<script src="https://www.gstatic.com/firebasejs/6.2.0/firebase-storage.js"></script>
性能监控（测试版）	<script src="https://www.gstatic.com/firebasejs/6.2.0/firebase-performance.js"></script> 访问性能监控使用入门，添加独立的轻量级 Performance Monitoring SDK 选项。
实时数据库	<script src="https://www.gstatic.com/firebasejs/6.2.0/firebase-database.js"></script>

可用的 Firebase JS SDK（使用模块捆绑器）

Firebase 产品	库参考
Firebase 核心（必需）	`import "firebase/app";`
身份验证	`import "firebase/auth";`
Cloud Firestore	`import "firebase/firestore";`
Cloud Functions for Firebase 客户端 SDK	`import "firebase/functions";`
云消息传递	`import "firebase/messaging";`
Cloud Storage	`import "firebase/storage";`
性能监控（测试版）	`import "firebase/performance";`
实时数据库	`import "firebase/database";`

可用的 Firebase JS SDK（适用于 Node.js 的模块）

Firebase 产品	库模块
Firebase 核心（必需）	`"firebase/app"`
身份验证	`"firebase/auth"`
Cloud Firestore	`"firebase/firestore"`
Cloud Functions for Firebase 客户端 SDK	`"firebase/functions"`
实时数据库	`"firebase/database"`

其他设置选项

延迟加载 Firebase SDK（来自 CDN）

您可以等到整个页面加载完成后，延迟添加 Firebase SDK。

在 Firebase SDK 的每个 script 标记中添加 defer 标志，然后使用另一个脚本延迟进行 Firebase 的初始化，例如：

<script defer src="https://www.gstatic.com/firebasejs/6.2.0/firebase-app.js"></script>

<script defer src="https://www.gstatic.com/firebasejs/6.2.0/firebase-auth.js"></script>
<script defer src="https://www.gstatic.com/firebasejs/6.2.0/firebase-firestore.js"></script>

// ...

<script defer src="./init-firebase.js"></script>

创建一个 init-firebase.js 文件，然后在该文件中包含以下内容：

// TODO: Replace the following with your app's Firebase project configuration
var firebaseConfig = {
  // ...
};

// Initialize Firebase
firebase.initializeApp(firebaseConfig);

在单个应用中使用多个 Firebase 项目

在大多数情况下，您只需要在一个默认应用中初始化 Firebase。您可以通过两种等效的方式利用该应用访问 Firebase：

// Initialize Firebase with a "default" Firebase project
var defaultProject = firebase.initializeApp(firebaseConfig);

console.log(defaultProject.name);  // "[DEFAULT]"

// Option 1: Access Firebase services via the defaultProject variable
var defaultStorage = defaultProject.storage();
var defaultFirestore = defaultProject.firestore();

// Option 2: Access Firebase services using shorthand notation
defaultStorage = firebase.storage();
defaultFirestore = firebase.firestore();

但有时，您需要同时访问多个 Firebase 项目。例如，您可能需要从一个 Firebase 项目的数据库中读取数据，但在其他 Firebase 项目中存储文件。或者，您可能需要对一个项目进行身份验证，而对第二个项目不进行身份验证。

借助 Firebase JavaScript SDK，您可以在一个应用中同时初始化和使用多个 Firebase 项目，并且每个项目使用其各自的 Firebase 配置信息。

// Initialize Firebase with a default Firebase project
firebase.initializeApp(firebaseConfig);

// Initialize Firebase with a second Firebase project
var otherProject = firebase.initializeApp(otherProjectFirebaseConfig, "other");

console.log(firebase.app().name);  // "[DEFAULT]"
console.log(otherProject.name);    // "otherProject"

// Use the shorthand notation to access the default project's Firebase services
var defaultStorage = firebase.storage();
var defaultFirestore = firebase.firestore();

// Use the otherProject variable to access the second project's Firebase services
var otherStorage = otherProject.storage();
var otherFirestore = otherProject.firestore();

运行本地 Web 服务器以用于开发

如果要构建 Web 应用，您会发现 Firebase JavaScript SDK 的部分组件要求从服务器（而不是从本地文件系统）提供您的 Web 应用。您可以使用 Firebase CLI 运行本地服务器。

如果您为应用设置了 Firebase 托管，则下面的几个步骤可能先前已经完成。

安装或更新 Firebase CLI。从计算机的任意位置运行以下 npm 命令：
```
npm install -g firebase-tools
```
注意：如果命令失败，请查看详细的 CLI 安装说明。
登录 Google。运行以下命令：
```
firebase login
```
此命令将您的本地机器与 Firebase 关联，并授予您对 Firebase 项目的访问权限。
初始化您的 Firebase 项目。从本地应用目录的根目录运行以下命令：
```
firebase init
```
此初始化命令会：
- 将您的本地应用目录与 Firebase 关联。
- 生成一个 firebase.json 文件（Firebase 托管所需的必要文件）。
- 提示您指定一个包含您的公共静态文件（HTML、CSS、JS 等）的公共根目录。
  
  Firebase 所要查找的该目录的默认名称为“public”。您也可以通过直接修改 firebase.json 文件的方式来稍后设置公共目录。
启动本地服务器以用于开发。从本地应用目录的根目录运行以下命令：
```
firebase serve
```

后续步骤

了解 Firebase：

探索 Firebase 应用示例。
借助 Firebase Web Codelab 获得实际上手经验。
浏览 GitHub 中的开源代码。
查看 Firebase JavaScript SDK 的支持环境。
借助 Firebase 维护的其他开源库（如 AngularFire、RxFire 和 FirebaseUI for web）加快开发速度。
准备启动您的应用：
- 设置结算提醒
- 查看 Firebase 发布核对清单

将 Firebase 服务添加到您的应用，如：

使用 Firebase 托管功能托管您的应用。
使用身份验证设置用户身份验证流程。
使用 Cloud Firestore 或实时数据库存储数据（如用户信息）。
使用 Cloud Storage 存储文件，如照片和视频。
使用性能监控深入了解您应用的性能问题。
使用 Cloud Functions 函数触发在安全环境中运行的后端代码。
使用云消息传递功能发送通知。

将 Firebase 添加到您的 JavaScript 项目

准备工作

第 1 步：创建 Firebase 项目

第 2 步：注册您的应用

第 3 步：添加 Firebase SDK 并初始化 Firebase

从托管网址添加

从 CDN 添加

使用模块捆绑器添加

Node.js 应用

Firebase 配置对象

第 4 步：（可选）安装 CLI 并部署到 Firebase 托管

默认托管网站

非默认托管网站

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

可用的库

可用的 Firebase JS SDK（来自预留的托管网址）

可用的 Firebase JS SDK（来自 CDN）

可用的 Firebase JS SDK（使用模块捆绑器）

可用的 Firebase JS SDK（适用于 Node.js 的模块）

其他设置选项

延迟加载 Firebase SDK（来自 CDN）

在单个应用中使用多个 Firebase 项目

运行本地 Web 服务器以用于开发

后续步骤