Phaser 2接入Quasar框架时出现浏览器报错如何解决？

问题原因 #

PIXI is not defined报错由以下几个配置问题共同导致：

• webpack.DefinePlugin 配置不符合要求：Phaser 依赖的WEBGL_RENDERER和CANVAS_RENDERER需要传入序列化后的布尔值，直接写true会被webpack解析为变量而非布尔值，导致Phaser内部初始化逻辑出错，无法正常识别全局注入的PIXI变量。
• 直接覆盖webpack的resolve.extensions配置：Quasar本身内置了其他默认后缀配置，直接赋值会导致部分模块无法正常解析，影响依赖加载顺序。
• expose-loader 适配性问题：Phaser 2 split版本要求PIXI、p2必须先挂载到window对象下才能正常初始化，expose-loader的注入逻辑和旧版Phaser的适配性较差，容易出现全局变量挂载失败。

解决方案 #

第一步：修改quasar.conf.js配置 #

调整extendWebpack段的配置，修改后的完整配置如下：

const webpack = require('webpack');
const path = require('path');

const phaserModule = path.join(__dirname, '/node_modules/phaser/');
const p2 = path.join(phaserModule, 'build/custom/p2.js');
const phaser = path.join(phaserModule, 'build/custom/phaser-split.js');
const pixi = path.join(phaserModule, 'build/custom/pixi.js');

module.exports = function (/* ctx */) {
  return {
    extendWebpack(cfg) {
      // 改为追加后缀，不要直接覆盖原有配置
      cfg.resolve.extensions.push('.js', '.vue', '.json');
      cfg.resolve.alias.p2 = p2;
      cfg.resolve.alias.pixi = pixi;
      cfg.resolve.alias.phaser = phaser;
      cfg.module.rules.push({
        enforce: 'pre',
        test: /\.(js|vue)$/,
        loader: 'eslint-loader',
        exclude: /(node_modules|quasar)/,
      });
      cfg.module.rules.push({
        test: /\.(frag|vert)$/,
        loader: 'raw-loader',
      });
      // 替换expose-loader为script-loader，直接注入全局变量，适配旧版Phaser
      cfg.module.rules.push({
        test: /pixi\.js/,
        loader: 'script-loader',
      });
      cfg.module.rules.push({
        test: /phaser-split\.js$/,
        loader: 'script-loader',
      });
      cfg.module.rules.push({
        test: /p2\.js/,
        loader: 'script-loader',
      });
      // 布尔值需要JSON.stringify序列化，否则会被webpack识别为变量
      cfg.plugins.push(new webpack.DefinePlugin({
        WEBGL_RENDERER: JSON.stringify(true),
        CANVAS_RENDERER: JSON.stringify(true),
      }));
    },
  };
};

第二步：修改游戏页面的导入逻辑 #

script-loader已经将三个依赖直接挂载到全局window对象下，不需要再做导入赋值，修改script段的导入代码：

/* eslint-disable no-undef */
import 'pixi';
import 'p2';
import 'phaser';
/* eslint-enable no-undef */

页面中直接使用全局Phaser变量即可，不需要再通过import获取实例。

第三步：清理缓存重启项目 #

执行以下命令清理webpack缓存，避免旧配置残留导致报错：

rm -rf node_modules/.cache
quasar dev

备选方案（如果上述配置不生效） #

直接切换为phaser-ce包，删除package.json中的phaser: ^2.4.6依赖，修改quasar.conf.js中的phaserModule路径为：

const phaserModule = path.join(__dirname, '/node_modules/phaser-ce/');

其他配置保持不变即可。

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