将 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 配置对象

本指南中的每个配置步骤都要求您使用 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",
};

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

第 3 步：配置您的应用以使用 Firebase

您可以配置一个 Web 应用或 Node.js 应用以使用 Firebase。

WEB NODE.JS

配置 Web 应用

使用以下任一选项配置您的 JavaScript Web 应用以使用 Firebase：

从 CDN 隐式添加特定 Firebase SDK
捆绑或动态加载特定 Firebase SDK
添加整个 Firebase JavaScript SDK

选项 1：从 CDN 隐式添加特定 SDK

您可以配置 Firebase JavaScript SDK 的部分导入 - 仅加载您需要的 Firebase 产品。

Firebase 将 Firebase JavaScript SDK 的每个库存储在全球级内容分发网络 (CDN) 上。

例如，要仅添加身份验证和实时数据库，请在应用的 body 标记中使用以下 script 标记：

<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/5.10.1/firebase-app.js"></script>

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

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

另外，您可以延迟添加 Firebase SDK，在整个页面加载完成后再添加。

首先，向 Firebase SDK 的每个 script 标记添加 defer 标志，然后使用第二个脚本延迟 Firebase 的初始化，例如：

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

<script defer src="https://www.gstatic.com/firebasejs/5.10.1/firebase-auth.js"></script>
<script defer src="https://www.gstatic.com/firebasejs/5.10.1/firebase-database.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);

适用于 JavaScript 应用的可用 Firebase SDK（隐式地来自 CDN）

Firebase 产品	库参考
Firebase 核心（必需）	<script src="https://www.gstatic.com/firebasejs/5.10.1/firebase-app.js"></script>
身份验证	<script src="https://www.gstatic.com/firebasejs/5.10.1/firebase-auth.js"></script>
Cloud Firestore	<script src="https://www.gstatic.com/firebasejs/5.10.1/firebase-firestore.js"></script>
Cloud Functions for Firebase 客户端 SDK	<script src="https://www.gstatic.com/firebasejs/5.10.1/firebase-functions.js"></script>
云消息传递	<script src="https://www.gstatic.com/firebasejs/5.10.1/firebase-messaging.js"></script>
Cloud Storage	<script src="https://www.gstatic.com/firebasejs/5.10.1/firebase-storage.js"></script>
实时数据库	<script src="https://www.gstatic.com/firebasejs/5.10.1/firebase-database.js"></script>

选项 2：捆绑或动态加载特定 SDK

您可以配置 Firebase JavaScript SDK 的部分导入 - 仅加载您需要的 Firebase 产品。

如果您使用的是 Bundler（如 Browserify 或 webpack），则可以在需要时 import 要使用的单个 Firebase 产品。

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

在您的应用中使用 Firebase 模块。例如，要仅加载身份验证和实时数据库，请使用以下 import 语句：

// 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/database";

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

// Initialize Firebase
firebase.initializeApp(firebaseConfig);

适用于 JavaScript 应用的可用 Firebase SDK（`import` 模块）

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/database";`

选项 3：添加整个 Firebase JavaScript SDK

要加载整个 Firebase JavaScript SDK，请在您应用的 body 标记中使用以下 script 标记：

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

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

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

配置 Node.js 应用

安装 Firebase JavaScript SDK：
1. 通过从 JavaScript 项目的根目录运行以下命令，创建一个 package.json 文件（如果您还没有该文件）：
```
npm init
```
2. 通过运行以下命令，安装 firebase npm 软件包并将其保存到 package.json 文件：
```
npm install --save firebase
```
在您的应用中使用 Firebase 模块。使用以下任一选项：
- 您可以 require 来自任何 JavaScript 文件的模块：
  - 要仅添加您要使用的 Firebase 产品（如身份验证和实时数据库），请运行以下命令：
```
// 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/database");
```
  - 要添加整个 Firebase JavaScript SDK，请运行以下命令：
```
var firebase = require("firebase");
```
- 您可以使用 ES2015 import 模块：
  - 要仅添加您要使用的 Firebase 产品（如身份验证和实时数据库），请运行以下命令：
```
// 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/database";
```
  - 要添加整个 Firebase JavaScript 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);

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

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

第 4 步：在您的应用中访问 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.database()`

其他设置选项

在单个应用中使用多个 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 defaultDatabase = defaultProject.database();

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

但有时，您需要同时访问多个 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 defaultDatabase = firebase.database();

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

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

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

安装 Firebase CLI。

从计算机的任意位置运行以下命令：
```
npm install -g firebase-tools
```
将您的本地应用目录与 Firebase 相关联，并生成一个 firebase.json 文件（Firebase 托管需要执行此操作）。

从本地应用目录的根目录运行以下命令：
```
firebase init
```
在初始化期间，系统会提示您指定一个包含您公共静态文件的目录（您的公共根目录）。Firebase 查找的目录的默认名称为“public”。您还可以通过直接修改您的 firebase.json 文件，稍后设置公共目录。
启动本地服务器以用于开发。

从本地应用目录的根目录运行以下命令：
```
firebase serve
```

从预留网址加载 SDK

如果您使用 Firebase 托管功能来托管您的 Web 应用，则可以将您的应用配置为从预留网址动态加载 Firebase JavaScript SDK 库。

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

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