当您使用 Firebase 开发 Web 应用程序时，您可能会遇到不熟悉的概念，或者您需要更多信息来为您的项目做出正确决策的领域。此页面旨在回答这些问题或为您提供资源以了解更多信息。
如果您有关于未涉及此页主题的问题，请访问我们的一个在线社区。我们还会定期使用新主题更新此页面，因此请回来查看我们是否添加了您想了解的主题。
SDK 版本 8 和 9
Firebase 为 Web 应用程序提供了两个 SDK 版本：
- 第8版这是JavaScript接口，火力地堡一直保持了好几年，是熟悉的Web开发人员与现有火力地堡的应用程序。由于 Firebase 将在一个主要发布周期后取消对此版本的支持，因此新应用应改为采用版本 9。
- 模块化版本9。该SDK引入了模块化的方法是提供降低SDK的尺寸和更高的效率与现代的JavaScript构建工具，如的WebPack或汇总。
版本 9 与构建工具很好地集成，这些工具可以去除您的应用程序中未使用的代码，这一过程称为“摇树”。使用此 SDK 构建的应用程序可大大减少占用空间。版本 8 虽然作为模块提供，但没有严格的模块化结构，也没有提供相同程度的尺寸缩减。
尽管版本 9 SDK 的大部分遵循与版本 8 相同的模式，但代码的组织是不同的。通常，版本 8 面向命名空间和服务模式，而版本 9 面向离散功能。例如，版本8点的点链接，如firebaseApp.auth()由单个替换版本9 getAuth()函数，它接受firebaseApp和返回认证实例。
这意味着使用版本 8 或更早版本创建的 Web 应用程序需要重构才能利用版本 9 的模块化方法。 Firebase 提供了兼容库来简化这种转换；看到升级指南了解更多详情。
支持什么？
虽然版本 8 和版本 9 具有不同的代码风格，但它们对 Firebase 功能和选项的支持非常相似。正如我们将在本指南中详细描述的那样，两个 SDK 版本都支持 JavaScript 和 Node.js 变体以及用于添加/安装 SDK 的几个选项。
| 添加 SDK | 8.0（命名空间） | 9.0（模块化） |
|---|---|---|
| 新产品经理 |
|
|
| CDN（内容交付网络） |
|
|
| 托管 URL |
|
欲了解更多信息，请参阅方式到Web的SDK添加到您的应用程序和火力地堡网络SDK变种后来此页面上。
新应用程序的第 9 版
如果你开始与火力地堡一个新的整合，你可以选择到第9版SDK，当你添加和初始化SDK 。
当你开发的应用程序，请记住，你的代码会被周围的功能主要组织。在版本 9 中，服务作为第一个参数传递，然后函数使用服务的详细信息来完成剩下的工作。例如：
import { getAuth, onAuthStateChanged } from "firebase/auth";
const auth = getAuth(firebaseApp);
onAuthStateChanged(auth, user => {
// Check for user status
});
有关详细的实施例和细节，请参见每个产品区域中的引导件以及该版本9参考文档。
将 Web SDK 添加到您的应用程序的方法
Firebase 为大多数 Firebase 产品提供 JavaScript 库，包括远程配置、FCM 等。您如何将 Firebase SDK 添加到您的 Web 应用程序取决于您在应用程序中使用的工具（如模块捆绑器），或者您的应用程序是否在非浏览器环境（如 Node.js）中运行。
您可以添加任意的可用库通过的支持的方法，您的应用程序：
- npm（用于模块打包器和 Node.js）
- CDN（内容分发网络）
有关详细的安装说明，请参阅添加火力地堡到您的JavaScript应用程序。本节的其余部分包含可帮助您从可用选项中进行选择的信息。
新产品经理
下载 Firebase npm 包（包括浏览器和 Node.js 包）可为您提供 Firebase SDK 的本地副本，非浏览器应用程序（例如 Node.js 应用程序、React Native 或 Electron）可能需要它。下载包括 Node.js 和 React Native 包作为某些包的选项。 Node.js 包是 SSR 框架的服务器端渲染 (SSR) 步骤所必需的。
使用NPM与模块的捆绑，如的WebPack或汇总提供优化选项，以“树摇”无用的代码和应用针对性polyfills，这样可以大大降低您的应用程序的大小足迹。实现这些功能可能会给您的配置和构建链增加一些复杂性，但各种主流 CLI 工具可以帮助缓解这种情况。这些工具包括角，作出反应， Vue公司，然后和其他人。
总之：
- 提供有价值的应用程序大小优化
- 强大的工具可用于管理模块
- 需要使用 Node.js 的 SSR
CDN（内容分发网络）
添加存储在 Firebase 的 CDN 上的库是一种简单的 SDK 设置方法，许多开发人员可能都很熟悉。使用 CDN 添加 SDK，您将不需要构建工具，并且与模块捆绑器相比，您的构建链可能更简单、更易于使用。如果您不是特别关心应用程序的安装大小并且没有特殊要求（例如从 TypeScript 转译），那么 CDN 可能是一个不错的选择。
总之：
- 熟悉又简单
- 适用于应用程序大小不是主要问题的情况
- 适用于您的网站不使用构建工具的情况。
Firebase Web SDK 变体
目前，Firebase 提供两种 Web SDK 变体：
- 支持在浏览器中使用的所有 Firebase 功能的 JavaScript 包。
- 支持许多（但不是全部）Firebase 功能的客户端 Node.js 包。见列表支持的环境。
这两个 SDK 变体都旨在帮助构建 Web 应用程序或客户端应用程序以供最终用户访问，例如在 Node.js 桌面或 IoT 应用程序中。如果你的目标是建立在特权环境（如服务器）管理访问权限使用火力地堡管理SDK来代替。
使用捆绑器和框架进行环境检测
使用 npm 安装 Firebase Web SDK 时，会同时安装 JavaScript 和 Node.js 版本。该软件包提供了详细的环境检测，以便为您的应用程序启用正确的包。
如果您的代码使用Node.js的require陈述，该SDK发现的节点特定的捆绑。否则，你的捆绑的设置必须正确想通检测您合适的切入点场package.json文件（例如， main ， browser ，或module ）。如果您在使用 SDK 时遇到运行时错误，请检查以确保您的捆绑器配置为优先考虑适合您环境的正确类型的捆绑包。
了解 Firebase 配置对象
要在您的应用中初始化 Firebase，您需要提供应用的 Firebase 项目配置。你可以得到你的火力地堡配置对象在任何时间。
我们不建议手动编辑你的配置对象，特别是以下要求的“火力地堡选项”：
apiKey，projectId和appID。如果您使用这些必需的“Firebase 选项”的无效值或缺失值初始化您的应用程序，您的应用程序用户可能会遇到严重问题。如果您在火力地堡项目启用了谷歌分析，你的配置对象包含字段
measurementId。详细了解此字段中Analytics入门页面。
这是启用所有服务的配置对象的格式（这些值会自动填充）：
// For Firebase JavaScript SDK v7.20.0 and later, `measurementId` is an optional field
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",
measurementId: "G-MEASUREMENT_ID",
};
可用库
其他设置选项
延迟加载 Firebase SDK（来自 CDN）
您可以延迟包含 Firebase SDK，直到整个页面加载完毕。如果您使用的版本9个CDN脚本与<script type="module">这是默认的行为。如果您将版本 8 CDN 脚本用作模块，请完成以下步骤以延迟加载：
一个加入
defer标志各script的火力地堡的SDK标签，然后用第二个脚本，例如推迟火力地堡的初始化：<script defer src="https://www.gstatic.com/firebasejs/8.10.0/firebase-app.js"></script> <script defer src="https://www.gstatic.com/firebasejs/8.10.0/firebase-auth.js"></script> <script defer src="https://www.gstatic.com/firebasejs/8.10.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：
网页版 9
import { initializeApp } from "firebase/app";
import { getStorage } from "firebase/storage";
import { getFirestore } from "firebase/firestore";
// Initialize Firebase with a "default" Firebase project
const defaultProject = initializeApp(firebaseConfig);
console.log(defaultProject.name); // "[DEFAULT]"
// Option 1: Access Firebase services via the defaultProject variable
let defaultStorage = getStorage(defaultProject);
let defaultFirestore = getFirestore(defaultProject);
// Option 2: Access Firebase services using shorthand notation
defaultStorage = getStorage();
defaultFirestore = getFirestore();网页版 8
// Initialize Firebase with a "default" Firebase project const defaultProject = firebase.initializeApp(firebaseConfig); console.log(defaultProject.name); // "[DEFAULT]" // Option 1: Access Firebase services via the defaultProject variable let defaultStorage = defaultProject.storage(); let 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 配置信息。
网页版 9
import { initializeApp, getApp } from "firebase/app";
import { getStorage } from "firebase/storage";
import { getFirestore } from "firebase/firestore";
// Initialize Firebase with a default Firebase project
initializeApp(firebaseConfig);
// Initialize Firebase with a second Firebase project
const otherProject = initializeApp(otherProjectFirebaseConfig, "other");
console.log(getApp().name); // "[DEFAULT]"
console.log(otherProject.name); // "otherProject"
// Use the shorthand notation to access the default project's Firebase services
const defaultStorage = getStorage();
const defaultFirestore = getFirestore();
// Use the otherProject variable to access the second project's Firebase services
const otherStorage = getStorage(otherProject);
const otherFirestore = getFirestore(otherProject);网页版 8
// Initialize Firebase with a default Firebase project firebase.initializeApp(firebaseConfig); // Initialize Firebase with a second Firebase project const 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 const defaultStorage = firebase.storage(); const defaultFirestore = firebase.firestore(); // Use the otherProject variable to access the second project's Firebase services const otherStorage = otherProject.storage(); const otherFirestore = otherProject.firestore();
运行本地 Web 服务器进行开发
如果您正在构建 Web 应用程序，Firebase JavaScript SDK 的某些部分要求您从服务器而不是从本地文件系统提供您的 Web 应用程序。您可以使用火力地堡CLI来运行本地服务器。
如果您已经为您的应用设置了 Firebase 托管，您可能已经完成了以下几个步骤。
要为您的网络应用提供服务，您将使用 Firebase CLI，一种命令行工具。
初始化您的 Firebase 项目。从本地应用程序目录的根目录运行以下命令：
firebase init
将您的本地应用目录与 Firebase 相关联
生成一个
firebase.json文件（用于火力地堡托管所需的文件）提示您指定一个公共根目录，其中包含您的公共静态文件（HTML、CSS、JS 等）
Firebase 查找的目录的默认名称是“public”。您还可以设置公共目录后直接修改您的
firebase.json文件。
启动本地服务器的发展。从本地应用程序目录的根目录运行以下命令：
firebase serve
Firebase JavaScript SDK 的开源资源
Firebase 支持开源开发，我们鼓励社区贡献和反馈。
Firebase JavaScript SDK
大多数火力地堡的JavaScript SDK的开发作为我们的公共开源库火力地堡GitHub的仓库。
快速入门示例
Firebase 为 Web 上的大多数 Firebase API 维护了一组快速入门示例。发现在我们的公共这些快速入门火力地堡GitHub的快速启动库。您可以将这些快速入门用作使用 Firebase SDK 的示例代码。