Phaser 3 with modules

samme · February 4, 2024, 9:56pm

You need only 1 module script in the HTML document, e.g., main.js. That’s the top-level module. That script can import any other modules it needs.

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

If you don’t mark this script as a module, you’ll see an error similar to

Uncaught SyntaxError: import declarations may only appear at top level of a module

In the browser, module specifiers are URLs (unless you use import maps). Relative URLs must start with / or ./ or ../.

import { Game } from "https://cdn.jsdelivr.net/npm/phaser@3.70.0/dist/phaser.esm.js";

import { gameConfig } from "./gameConfig.js";

Phaser global with modules

gist.github.com

https://gist.github.com/samme/c1006080b0cc37c7a563452c61fa6ca3

gameConfig.js

export const gameConfig = {
  scene: {
    create: function () {
      this.add.text(0, 0, "Hello world");
    }
  }
};

main.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Phaser 3 game</title>
    <style>html, body { height: 100%; margin: 0; }</style>
    <script src="https://cdn.jsdelivr.net/npm/phaser@3.70.0/dist/phaser.js" defer></script>
    <script src="main.js" type=module></script>
  </head>
  <body></body>

This file has been truncated. show original

main.js

import { gameConfig } from "./gameConfig.js";

new Phaser.Game(gameConfig);

Phaser ESM with modules (since v3.60; experimental)