How to import Phaser correctly in html

Phaser 3
1

Hi there :slight_smile:
I used to import Phaser like that in my html file :

<script src="https://cdn.jsdelivr.net/npm/phaser@3.54.0/dist/phaser.js"></script>

but i would like to import plugins, so i follow this recommandation Fade out destroy - Notes of Phaser 3 and i wanna import phaser with npm

So i made like that in my local project -with wampserver :

npm install phaser

in my index.html :

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

and in my main.js :

import Phaser from 'phaser'

BUT i have this error :

Uncaught TypeError: Failed to resolve module specifier “phaser”. Relative references must start with either “/”, “./”, or “…/”.

I don’t understand because there is a node_modules\phaser in my racine local project…

Could you please give me a clue ?

thx a lot !

++

Moneo

2

You will need a bundler like webpack, parcel etc.
Or supply the path to to phaser, so ‘./node_modules/phaser’.
Or not use modules, just do it like this.

3

ok thx, sorry for the noob question i didn’t see the link you post, very useful :slight_smile:

4

@rich, please, add support for ES6 modules. It would be amazing. It’s already implemented in Pixi.js and Planck.js

<body>
    <script async src="https://unpkg.com/es-module-shims@1.3.6/dist/es-module-shims.js"></script>

    <script type="importmap">
        {
            "imports": {
                "pixi.js": "https://cdn.skypack.dev/pixi.js@6.3.2",
                "planck-js": "https://cdn.skypack.dev/planck-js@0.3.31"
            }
        }
    </script>

    <script type="module">
        import * as PIXI from "pixi.js";
        import * as planck from "planck-js";

        console.log(PIXI.PI_2);

        const vec = planck.Vec2(1, 2)
        console.log(vec);
    </script>

    <!-- <script type="module" src="js/bundle.js"></script> -->
</body>
5

It’s in Phaser 4.

6

It doesn’t work:

image

image

<body>
    <script async src="https://unpkg.com/es-module-shims@1.3.6/dist/es-module-shims.js"></script>

    <script type="importmap">
        {
            "imports": {
                "phaser": "https://cdn.skypack.dev/@phaserjs/phaser@0.2.2"
            }
        }
    </script>

    <script type="module">
        import * as Phaser from "phaser";

        console.log(Phaser);
    </script>

    <!-- <script type="module" src="js/bundle.js"></script> -->
</body>
7

You can open a Phaser 4 issue. Probably bitecs needs moving to dependencies.

8

I can’t include bitecs in the package.json manifest on SkyPack myself. Only the package author can do this:

 * How to fix:
 *   - Let the "@phaserjs/phaser" package author know that "bitecs" needs to be included in their package.json manifest.
 *   - Use https://skypack.dev/ to find a web-friendly alternative to find another package.
9

@samme, I created an example playground to demonstrate the problem: PlayCode - Javascript Playground

10

I fixed the link above. Now it works with Phaser 3: How to import Phaser correctly in html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>Document</title>
</head>

<body>
    <!-- Since import maps are not yet supported by all browsers, its is
        necessary to add the polyfill es-module-shims.js -->
    <script async src="https://unpkg.com/es-module-shims@1.7.3/dist/es-module-shims.js"></script>

    <script type="importmap">
        {
            "imports": {
                "phaser3": "https://cdn.jsdelivr.net/npm/phaser@3.60.0/dist/phaser.esm.js"
            }
        }
    </script>

    <script type="module">
        import * as Phaser from "phaser3";
        console.log(Phaser.VERSION);
    </script>
</body>

</html>