按照本指南在您的 Web 应用程序中使用 Firebase JavaScript SDK 或作为最终用户访问的客户端,例如在 Node.js 桌面或 IoT 应用程序中。
第 1 步:创建一个 Firebase 项目并注册您的应用
在将 Firebase 添加到 JavaScript 应用程序之前,您需要创建一个 Firebase 项目并向该项目注册您的应用程序。当您向 Firebase 注册您的应用程序时,您将获得一个 Firebase 配置对象,您将使用该对象将您的应用程序与 Firebase 项目资源连接起来。
访问了解 Firebase 项目以了解有关 Firebase 项目的更多信息以及将应用程序添加到项目的最佳实践。
如果您还没有 JavaScript 项目而只是想试用 Firebase 产品,则可以下载我们的快速入门示例之一。
第 2 步:安装 SDK 并初始化 Firebase
本页介绍了使用JavaScript 模块格式的 Firebase JS SDK 版本 9 的设置说明。
此工作流使用 npm 并需要模块捆绑器或 JavaScript 框架工具,因为 v9 SDK 经过优化以与模块捆绑器一起使用以消除未使用的代码(摇树优化)并减小 SDK 大小。
使用 npm 安装 Firebase:
npm install firebase
在您的应用中初始化 Firebase 并创建一个 Firebase App 对象:
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 App 对象后,您可以添加并开始使用 Firebase 服务。
第 3 步:在您的应用中访问 Firebase
Firebase 服务(如 Cloud Firestore、身份验证、实时数据库、远程配置等)可在单独的子包中导入。
下面的示例展示了如何使用 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 旨在与模块捆绑器一起使用以删除任何未使用的代码(摇树优化)。我们强烈建议对生产应用程序使用此方法。 Angular CLI 、 Next.js 、 Vue CLI或Create React App等工具自动处理通过 npm 安装并导入到代码库中的库的模块捆绑。
有关详细信息,请参阅我们的指南将模块捆绑器与 Firebase 结合使用。
适用于 Web 的可用 Firebase 服务
现在您已设置好使用 Firebase,您可以开始在您的 Web 应用程序中添加和使用以下任何可用的 Firebase 服务。
以下命令显示如何使用npm
导入本地安装的 Firebase 库。有关替代导入选项,请参阅可用的库文档。
下一步
了解 Firebase:
亲身体验Firebase Web Codelab 。
查看 Firebase JavaScript SDK支持的环境。
使用其他 Firebase 维护的开源库加快您的开发,例如AngularFire 、 RxFire和FirebaseUI for web 。
准备启动您的应用程序:
- 在 Google Cloud Console 中为您的项目设置预算提醒。
- 监控 Firebase 控制台中的使用情况和计费仪表板,以全面了解您的项目在多个 Firebase 服务中的使用情况。
- 查看Firebase 启动清单。