'Firebase 未定义' Firebase 版本 9 的答案答案

【问题标题】：'Firebase Not Defined' An Answer For Version 9 Of Firebase'Firebase 未定义' Firebase 版本 9 的答案
【发布时间】：2021-10-16 09:47:43
【问题描述】：

我正在尝试进行数据库调用/发布，但我得到了错误

functions.js:7 Uncaught ReferenceError: firebase is not defined

根据我的研究，我了解到“firebase”是在使用 Firebase 设置面板中的 CDN 代码导入的 firebase.js 脚本文件中定义的。但是我找到的所有帮助页面都是从 2014 年到 2017 年，而 Firebase 版本 9 使用完全不同的导入语言。这些页面对我没有帮助..

我使用的是标准

import { initializeApp } from "https://www.gstatic.com/firebasejs/9.1.3/firebase-app.js";

我的想法是否正确，因为这个导入正在发生（它似乎是 - firebase-app.js 出现在检查器中）应该定义那个 firebase...

或者firebase是否在其他地方定义并且我错过了什么？如果是这种情况下定义了 firebase 以及如何导入它（使用 V9 Firebase）

谢谢

编辑：我是通过我在 Youtube 上找到的 2019 年的教程来完成这一切的。现在调用“firebase”是否可能已经过时，这就是我遇到这些麻烦的原因？还是我应该期望它能够工作并继续努力寻找解决方案？

【问题讨论】：

你能分享你的代码是从哪里抛出错误还是来自 SDK？
就是：const database = firebase.database()

标签： javascript firebase firebase-realtime-database

【解决方案1】：

在 Firebase Web SDK 的 v8 和更早版本（现在称为“命名空间 SDK”）中，SDK 会将方法和类型添加到名为 firebase 的全局对象中。你会看到很多现有的教程，其代码类似于firebase.initializeApp()、firebase.database() 和firebase.firestore.FieldValue.increment()。所有这些调用都不适用于较新版本的 Firebase Web SDK。

在 Firebase Web SDK 的 v9 及更高版本（现在称为“模块化 SDK”）中，SDK 进行了重大的架构改造并引入了许多重大更改。新版本的主要变化是 firebase 全局对象被完全删除，每个方法和类型现在都可以独立导出。将这个新的 SDK 与 Webpack 或 Rollup 等构建工具一起使用时，它可以“摇动树”以从最终构建中释放并删除您在代码中实际未使用的所有代码。

例如，如果您在代码中不使用任何 FieldValue 转换（如 increment()、serverTimestamp() 和 arrayUnion()），它们将不会包含在您的最终构建中，从而节省您和您的用户资源和时间。

【讨论】：

【解决方案2】：

不确定您是如何使用脚本文件的，但您是否在 html 中将它们定义为“模块”，例如：

您是否从您的应用初始化了 firebase：

const firebaseConfig = { YOU_FIREBASE_CONFIG } const app = initializeApp(firebaseConfig)

【讨论】：

是的，它们在

【解决方案3】：

firebase v8 和 v9 之间的区别是当今众所周知的错误。

我不确定这是否是确切的解决方案，但至少作为一个提示。

使用compat是一种解决方法。

基于下面的 firebase 文档。

import firebase from 'firebase/compat/app';

↑应该怎么导入.....

Upgrade from version 8 to the modular Web SDK

【讨论】：

虽然使用兼容性库可以解决问题，但应将兼容性库视为已弃用 - 即不要将其用于新代码。提供它是为了帮助人们将旧代码迁移到新格式，而不仅仅是彻底破坏一切。

【解决方案4】：

当你运行这段代码时：

import { initializeApp } from ...

此代码仅导入 initializeApp 函数，没有其他任何内容。这正是重点，因为通过使用这些非常精细的导入，捆绑工具（如 webpack）能够从其输出中删除您未使用的 Firebase SDK 的任何部分，从而显着缩小应用程序。

因此，当您运行该导入时，不再有顶级 firebase 命名空间。要访问实时数据库，您可以使用：

import { initializeApp } from 'firebase/app';
import { getDatabase } from "firebase/database";

// Set the configuration for your app
// TODO: Replace with your project's config object
const firebaseConfig = {
  apiKey: "apiKey",
  authDomain: "projectId.firebaseapp.com",
  databaseURL: "https://databaseName.firebaseio.com",
  storageBucket: "bucket.appspot.com"
};

const app = initializeApp(firebaseConfig);

// Get a reference to the database service
const database = getDatabase(app); // ? Get the database instance

这在initializing the Realtime Database JavaScript SDK 上的文档中有说明，所以我建议你把它放在手边。

如果您正在学习其他地方的教程或文档，它可能尚未更新为新的模块化语法。在这种情况下，您还可以使用新 SDK 的compat 模式，正如用户 K Lee 在their answer 中指出的那样。

【讨论】：

【解决方案5】：

一段时间后，我意识到您的所有 Javascript 代码都必须在您从 Firebase 仪表板导入的 SDK 模块标签中运行...

如果您的 Javascript 未在导入的 Firebase 代码的 <script type="module"> 标记内运行，则不会定义从 Firebase 模块化 SDK 导入的模块。

此外，我正在尝试阅读来自 Firebase V5 的教程，并且在那里也遇到了问题。

【讨论】：