如何在其他文件中调用已初始化的Firebase相关方法

报错set is not defined是ES模块的原生作用域规则导致的：每个独立JS模块内导入、声明的变量默认仅在当前模块作用域生效，不会自动挂载到全局。你在firebase.js中导入的set、ref方法，以及初始化生成的database实例没有对外暴露，script.js无法访问这些变量，触发引用错误。

1. 修改初始化文件firebase.js，导出共享资源 #

在文件末尾将初始化完成的数据库实例、业务需要用到的操作方法统一导出，修改后完整代码：

// firebase.js
import { initializeApp } from "https://www.gstatic.com/firebasejs/9.9.0/firebase-app.js";
import {
  getDatabase,
  ref,
  set,
  onValue,
  update,
  remove,
} from "https://www.gstatic.com/firebasejs/9.9.0/firebase-database.js";

const firebaseConfig = {
  // 替换为你的项目配置
  apiKey: "",
  authDomain: "",
  databaseURL: "",
  projectId: "",
  storageBucket: "",
  messagingSenderId: "",
  appId: ""
};

const app = initializeApp(firebaseConfig);
// 导出初始化完成的数据库实例
export const database = getDatabase(app);
// 导出常用数据库操作方法，业务文件无需重复从SDK地址导入
export { ref, set, onValue, update, remove };

2. 业务文件script.js中导入依赖使用 #

导入时注意写对firebase.js的相对路径，导入后即可正常调用相关方法，代码示例：

// script.js
// 从初始化文件导入需要的实例和方法
import { database, ref, set } from './firebase.js';

// 按钮点击写入数据逻辑示例
const actionBtn = document.querySelector('#actionBtn');
actionBtn.addEventListener('click', () => {
  set(ref(database, "test/path"), {
    content: "测试数据",
    time: Date.now()
  })
  .then(() => console.log("写入成功"))
  .catch(err => console.error("写入失败", err));
})

3. HTML引入脚本的必要配置 #

浏览器默认不识别ES模块的import/export语法，引入脚本时必须给script标签加type="module"属性，只需要引入业务入口文件即可，模块会自动加载依赖的初始化文件：

<script type="module" src="./script.js"></script>

如果不想在初始化文件统一导出SDK方法，也可以直接在业务文件中从Firebase CDN地址导入需要的方法，只要保证使用的database是firebase.js中导出的初始化实例即可，效果完全一致：

// script.js 可选写法
import { database } from './firebase.js';
// 直接从SDK导入方法
import { ref, set } from "https://www.gstatic.com/firebasejs/9.9.0/firebase-database.js";

// 后续调用逻辑不变
set(ref(database, "test/path"), { test: 123 })

• 导入本地模块时必须写对相对路径，若文件不在同级目录需要补全路径，否则会触发404模块加载错误。
• 不要重复调用initializeApp初始化多个Firebase应用实例，否则会导致配置冲突。

内容的提问来源于stack exchange，提问作者userName