Is it possible to use Phaser 3 with AMD/RequireJS and TypeScript?

Phaser 3
1

I made these simple steps:

  1. I created an empty folder for my simple example
  2. I type commands:

npm init -y
npm i -D @types/requirejs
npm i phaser

I created tsconfig.json:

{
    "compilerOptions": {
        "target": "es5",
        "module": "amd",
        "sourceMap": true,
        "outDir": "public/js",
        "types": [
            "phaser",
            "requirejs"
        ]
    },
    "include": [
        "src/**/*.ts"
    ]
}

This is RequireConfig.ts

requirejs.config({
    baseUrl: "js",
    paths: {
        "phaser": "https://cdnjs.cloudflare.com/ajax/libs/phaser/3.18.1/phaser.min"
    },
    shim: {
        "phaser": {
            exports: "Phaser"
        }
    }
});

requirejs(["Program"], (Program) => { });

Program.ts

import * as Phaser from "phaser";

class Program
{
    public static Main(): void
    {
        console.log(Phaser.VERSION);
    }
}

// Debug Version
Program.Main();

But when I set a breakpoint on this line:

console.log(Phaser.VERSION);

I see that Phaser is undefined. I do not understand why because my method works for:

  • gl-matrix/WebGL
  • Three.js
  • Babylon.js
  • Pixi.js

It does not work for Phaser only.

2

I found very interesting effect. This code print glMatrix, but Phaser is undefined. I do not understand, why?

requirejs.config({
    baseUrl: "js",
    paths: {
        "phaser": "https://cdnjs.cloudflare.com/ajax/libs/phaser/3.18.1/phaser.min",
        "gl-matrix": "https://cdnjs.cloudflare.com/ajax/libs/gl-matrix/2.8.1/gl-matrix-min"
    }
});

requirejs(["Program", "gl-matrix", "phaser"], (Program, glMatrix, Phaser) =>
{
    console.log(glMatrix);
    console.log(Phaser);
});
3

I added “shim” but console.log(Phaser) prints that Phaser is undefined. glMatrix is not undefined:

requirejs.config({
    baseUrl: "js",
    paths: {
        "phaser": "https://cdnjs.cloudflare.com/ajax/libs/phaser/3.18.1/phaser",
        "gl-matrix": "https://cdnjs.cloudflare.com/ajax/libs/gl-matrix/2.8.1/gl-matrix-min"
    },
    shim: {
        "phaser": {
            exports: "Phaser"
        }
    }
});

requirejs(["Program", "gl-matrix", "phaser"], (Program, glMatrix, Phaser) =>
{
    console.log(glMatrix);
    console.log(Phaser);
});
4

Three.js is not undefined:

requirejs.config({
    baseUrl: "js",
    paths: {
        "three": "https://cdnjs.cloudflare.com/ajax/libs/three.js/106/three.min",
        "phaser": "https://cdnjs.cloudflare.com/ajax/libs/phaser/3.18.1/phaser.min",
        "gl-matrix": "https://cdnjs.cloudflare.com/ajax/libs/gl-matrix/2.8.1/gl-matrix-min"
    },
    shim: {
        "phaser": {
            exports: "Phaser"
        }
    }
});

requirejs(["Program", "gl-matrix", "three", "phaser"], (Program, glMatrix, Three, Phaser) =>
{
    console.log(glMatrix);
    console.log(Three);
    console.log(Phaser);
});
5

I found the solution here: https://github.com/photonstorm/phaser3-docs/issues/67

I opened the “node_modules/phaser/types/phaser.d.ts” file and renamed ‘phaser’ to ‘Phaser’:

declare module 'Phaser' {
    export = Phaser;
}