使用Firebase V9时，p5.js非实例模式下的模块导入问题

为什么加type=module后p5.js失效？ #

• ES模块（type=module）的代码运行在模块作用域，内部定义的函数/变量默认不会暴露到全局window对象上。
• p5.js的全局模式（默认）依赖检测全局作用域里的setup、draw等函数来启动渲染循环。模块里的这些函数没挂到全局，p5自然找不到，也就不会执行。
• Firebase V9要求顶部导入，是因为ES模块的import语句必须放在模块代码的最顶部，这是ES模块的语法规范，不能在代码逻辑中间插入。

无需切换到p5.js实例模式的解决办法 #

办法1：手动将p5核心函数挂载到全局 #

在你的script.js（已设type=module）里，把setup、draw等函数赋值给window对象，让p5能在全局找到它们：

// script.js (type="module")
import { initializeApp, getDatabase, ref, set } from "firebase/database";

// 你的Firebase配置
const firebaseConfig = {
  // 配置内容
};

// 初始化Firebase
const app = initializeApp(firebaseConfig);
const db = getDatabase(app);

// 手动挂载p5函数到全局
window.setup = function() {
  createCanvas(400, 400);
  // 游戏初始化逻辑
};

window.draw = function() {
  background(220);
  // 游戏帧更新逻辑
};

// 保存高分的函数
window.saveHighScore = function(score) {
  set(ref(db, 'highscores/' + Date.now()), {
    score: score,
    timestamp: Date.now()
  });
};

办法2：拆分脚本，分离p5和Firebase逻辑 #

在HTML中分别加载全局模式的p5脚本、定义p5函数的全局脚本，以及处理Firebase的模块脚本，通过全局对象共享Firebase实例：

<!-- HTML文件 -->
<!-- 加载p5.js核心库 -->
<script src="https://cdn.jsdelivr.net/npm/p5@1.9.0/lib/p5.js"></script>

<!-- 全局作用域定义p5的setup/draw -->
<script>
  let firebaseDb; // 用于接收Firebase数据库实例

  function setup() {
    createCanvas(400, 400);
    // 初始化游戏
  }

  function draw() {
    background(220);
    // 游戏绘制
  }

  // 保存高分的函数，使用全局的firebaseDb
  function saveScore(score) {
    if (firebaseDb) {
      set(ref(firebaseDb, 'highscores/' + Date.now()), {
        score: score
      });
    }
  }
</script>

<!-- 加载Firebase模块脚本，挂载实例到全局 -->
<script type="module">
  import { initializeApp } from "firebase/app";
  import { getDatabase, ref, set } from "firebase/database";

  const firebaseConfig = {
    // 你的配置
  };

  const app = initializeApp(firebaseConfig);
  const db = getDatabase(app);
  // 将数据库实例挂到全局，让p5的脚本能访问
  window.firebaseDb = db;
</script>

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