How to set up @box2d/core for JavaScript using importmap #46

8Observer8 · 2024-03-31T09:18:12Z

8Observer8
Mar 31, 2024

Playground: https://plnkr.co/edit/vO3u4TLvSov2ZxK5?preview

index.html

<!doctype html>

<html>

<head>
    <title>@box2d/core and importmap</title>
</head>

<body>
    <p>Open the browser console to see the result. For example, Ctrl+Shift+J in Chrome.</p>

    <canvas id="renderCanvas"></canvas>

    <!-- Since importmap is not yet supported by all browsers, it is
        necessary to add the polyfill es-module-shims.min.js -->
    <script async src="https://unpkg.com/[email protected]/dist/es-module-shims.js"></script>

    <script type="importmap">
        {
            "imports": {
                "@box2d/core": "https://cdn.jsdelivr.net/npm/@box2d/[email protected]/+esm"
            }
        }
    </script>

    <script type="module" src="./js/index.js"></script>
</body>

</html>

js/index.js

import { b2World } from "@box2d/core";

const world = b2World.Create({ x: 0, y: -9.8 });

console.log(`gravity: ${world.GetGravity().x}, ${world.GetGravity().y}`);

You can use SkyPack instead of jsDelivr:

    <script type="importmap">
        {
            "imports": {
                "@box2d/core": "https://cdn.skypack.dev/@box2d/[email protected]"
            }
        }
    </script>

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

How to set up @box2d/core for JavaScript using importmap #46

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 0 comments

Select a reply

How to set up @box2d/core for JavaScript using importmap #46

8Observer8 Mar 31, 2024

Replies: 0 comments

8Observer8
Mar 31, 2024