独立脚本文件中Phaser插件类未定义问题求助

问题复现 #

场景1：分离文件时出错 #

HTML代码：

<script src="phaser.min.js"></script>
<script src="my_plugin.js"></script>
<script src="my_game_code.js"></script>

游戏代码（my_game_code.js）：

var game = new Phaser.Game(myConfigFile)

class MyScene extends Phaser.Scene{
     constructor(sceneData){
      super()
     }
    preload(){
     this.load.scenePlugin({
         key: "MyPlugin",
         url: MyPlugin,
         sceneKey: "myPlugin",
     });
    }
    create(){
    // 业务代码
    }
    update(){
    // 业务代码
    }
}

此时会出现「MyPlugin类未定义」的错误。

场景2：合并文件时正常 #

将my_plugin.js的代码直接粘贴到my_game_code.js开头，仅引入Phaser和合并后的脚本：
HTML代码：

<script src="phaser.min.js"></script>
<script src="my_game_code.js"></script>

游戏代码（my_game_code.js）：

// 粘贴my_plugin.js的代码
var game = new Phaser.Game(myConfigFile)

class myScene extends Phaser.Scene{
     constructor(sceneData){
      super()
     }
    preload(){
     this.load.scenePlugin({
         key: "MyPlugin",
         url: MyPlugin,
         sceneKey: "myPlugin",
   });
   }
    create(){
    // 业务代码
    }
    update(){
    // 业务代码
    }
}

此时插件可正常工作，但这种合并方式并非最优解。

优化解决方案 #

针对mikewesthad的PhaserNavMeshPlugin，结合Glitch编辑器环境，提供以下几种可行方案：

方案1：暴露插件全局变量 #

修改my_plugin.js，在文件末尾添加代码，将插件类挂载到全局window对象：

window.PhaserNavMeshPlugin = PhaserNavMeshPlugin;

然后修改游戏代码中的插件加载配置，引用全局变量：

preload(){
    this.load.scenePlugin({
        key: "NavMeshPlugin",
        url: PhaserNavMeshPlugin,
        sceneKey: "navMesh"
    });
}

同时保持HTML中的脚本引入顺序（Phaser → 插件 → 游戏代码）即可。

方案2：通过Phaser动态加载插件脚本 #

无需在HTML中提前引入my_plugin.js，直接通过Phaser的加载器加载插件文件：

preload(){
    this.load.scenePlugin({
        key: "NavMeshPlugin",
        url: "./my_plugin.js", // 注意Glitch中文件的相对路径，确保指向正确
        sceneKey: "navMesh"
    });
}

这种方式下，Phaser会在preload阶段自动加载并初始化插件，避免全局变量污染。

方案3：使用ES模块（推荐） #

如果Glitch项目支持ES模块，可通过模块化方式引入：

1. 修改HTML脚本标签，添加type="module"：

<script src="phaser.min.js"></script>
<script type="module" src="my_game_code.js"></script>

2. 在my_plugin.js中确保插件类被导出：

export default PhaserNavMeshPlugin;

3. 在游戏代码中导入插件：

import PhaserNavMeshPlugin from './my_plugin.js';

var game = new Phaser.Game(myConfigFile);

// 后续场景代码不变

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