如何在多个 JavaScript 文件中复用 Firebase 实例与功能-js教程-PHP中文网

如何在多个 JavaScript 文件中复用 Firebase 实例与功能

在无构建工具的纯 HTML 环境中，Firebase 模块需在每个使用它的文件中显式导入；不能仅靠一个文件初始化后全局共享 auth 或 db 实例——这是 ES 模块作用域机制决定的，而非 Firebase 特有行为。

在无构建工具的纯 html 环境中，firebase 模块需在每个使用它的文件中显式导入；不能仅靠一个文件初始化后全局共享 `auth` 或 `db` 实例——这是 es 模块作用域机制决定的，而非 firebase 特有行为。

要在多文件项目中高效、安全地复用 Firebase 功能（如认证、数据库操作），关键在于统一初始化 + 显式导出/导入，而非依赖全局变量或重复引入 SDK。以下是推荐的实践方案：

✅ 正确做法：模块化导出 + 按需导入

首先，在 firebase-sdk.js 中完成初始化，并显式导出所需实例：

// firebase-sdk.js
import { initializeApp } from "https://www.gstatic.com/firebasejs/10.5.0/firebase-app.js";
import { getFirestore } from "https://www.gstatic.com/firebasejs/10.5.0/firebase-firestore.js";
import { getAuth } from "https://www.gstatic.com/firebasejs/10.5.0/firebase-auth.js";

const firebaseConfig = {
  apiKey: "YOUR_API_KEY",
  authDomain: "YOUR_PROJECT.firebaseapp.com",
  projectId: "YOUR_PROJECT",
  storageBucket: "YOUR_PROJECT.appspot.com",
  messagingSenderId: "YOUR_SENDER_ID",
  appId: "YOUR_APP_ID"
};

const app = initializeApp(firebaseConfig);
export const auth = getAuth(app);
export const db = getFirestore(app);

⚠️ 注意：必须使用 export 声明，且该文件需以 <script type="module"> 方式加载（见下文）。</script>

然后，在 login.js 中直接导入所需模块：

Java JDK 25

Java JDK 25 来自 OpenJDK 官方归档，版本为 JDK 25，本条下载地址已指向官方 Windows x64 zip 安装包直链，适合调试旧项目或兼容旧版 Java 运行环境。

下载

// login.js
import { auth, db } from "./firebase-sdk.js";
import { signInWithEmailAndPassword } from "https://www.gstatic.com/firebasejs/10.5.0/firebase-auth.js";

const loginBtn = document.getElementById('id_submit_login_btn');

const loginBtnPressed = async () => {
  try {
    const loginEmail = document.getElementById('id_email_entry').value;
    const loginPassword = document.getElementById('id_password_entry').value;

    const userCredential = await signInWithEmailAndPassword(auth, loginEmail, loginPassword);
    console.log("登录成功:", userCredential.user.uid);
  } catch (error) {
    console.error("登录失败:", error.code, error.message);
  }
};

loginBtn.addEventListener('click', loginBtnPressed);

? HTML 页面中的关键配置

确保所有脚本均以 ES 模块方式加载（否则 import 会报错）：

<!-- index.html -->
<script type="module" src="./firebase-sdk.js"></script><script type="module" src="./login.js"></script><!-- 其他页面脚本同理 -->

❌ 不推荐的替代方案（及风险）

挂载到 window 对象（如 window.auth = getAuth(app)）：
虽然能绕过模块限制，但破坏模块封装性，易引发命名冲突、调试困难，且不符合现代 Web 开发规范。
重复导入 SDK 并重复初始化：
多次调用 initializeApp() 会抛出 Firebase App named '[DEFAULT]' already exists 错误；即使加异常捕获，也浪费资源且增加维护成本。
使用 <script>（非 module）混搭 import</script>：
浏览器不支持——import 语句仅在模块上下文中有效。

✅ 进阶建议：统一入口 + 类型安全（可选）

若项目规模扩大，可进一步封装为初始化函数：

// firebase-sdk.js
export function initFirebase() {
  // …… 配置与初始化逻辑
  return { auth, db };
}

// login.js
import { initFirebase } from "./firebase-sdk.js";
const { auth } = initFirebase(); // 确保单例

此模式便于后期注入测试桩、环境区分（开发/生产配置）或添加初始化状态检查。