Use "importmap" as below. The best solution to upload libraries to a hosting, for example, GitHub Pages, because UNPKG and jsDelivr don't work sometimes. Skypack requires a lot of time to search a library there. Your website will be online forever. You can copy libraries from "node_modules" to your GitHub Pages website. For this create the "libs" folder and folders inside it with the names like "gl-matrix@3.4.3", "box2d-wasm@7.0.0" and so on and copy libraries there from the "node_modules" folder. Or you can copy library from jsDelivr, for example, copy and save this file: https://cdn.jsdelivr.net/npm/@box2d/core@0.10.0/+esm
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Set up glMatrix as ES6-module in JavaScript</title>
</head>
<body>
<script type="importmap">
{
"imports": {
"gl-matrix": "https://8observer8.github.io/libs/gl-matrix@3.4.3/gl-matrix.min.js"
}
}
</script>
<script type="module">
import { glMatrix, mat4, vec2 } from "gl-matrix";
// Convert degrees to radians
const degrees = 45;
const radians = glMatrix.toRadian(degrees);
console.log(`radians = ${radians}`);
// Sum of two vectors
const v1 = vec2.fromValues(1, 2);
const v2 = vec2.fromValues(5, 6);
const sum = vec2.create();
vec2.add(sum, v1, v2);
console.log(`sum = (${sum[0]}, ${sum[1]})`);
// Identity matrix
const m = mat4.create();
console.log("Identity matrix:", m);
</script>
</body>
</html>
You can use these links for glMatrix:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Set up Box2D-WASM as ES6-module in JavaScript</title>
</head>
<body>
<script type="importmap">
{
"imports": {
"box2d-wasm": "https://8observer8.github.io/libs/box2d-wasm@7.0.0/es/entry.js"
}
}
</script>
<script type="module">
import Box2DLib from "box2d-wasm";
let box2d, world;
init();
async function init() {
await initBox2D();
const {
b2Vec2,
b2World
} = box2d;
world = new b2World(new b2Vec2(0, -9.8));
const gravity = world.GetGravity();
console.log(`gravity = (${gravity.x}, ${gravity.y})`);
}
function initBox2D() {
return new Promise(resolve => {
Box2DLib().then((re) => {
box2d = re;
resolve();
});
});
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Set up @box2d/core as ES6-module in JavaScript</title>
</head>
<body>
<script type="importmap">
{
"imports": {
"@box2d/core": "https://8observer8.github.io/libs/box2d-core@0.10.0/box2d-core.min.js"
}
}
</script>
<script type="module">
import { b2BodyType, b2PolygonShape, b2World } from "@box2d/core";
const world = b2World.Create({ x: 0, y: -9.8 });
const gravity = world.GetGravity();
console.log(`gravity = (${gravity.x}, ${gravity.y})`);
</script>
</body>
</html>
You can use these links for @box2d/core:
GitHub Pages:
Skypack:
jsDelivr:
These links do not work:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Set up Pixi.js 8 as ES6-module in JavaScript</title>
</head>
<body>
<script type="importmap">
{
"imports": {
"pixi.js": "https://8observer8.github.io/libs/pixi.js@8.1.6/pixi.min.mjs"
}
}
</script>
<script type="module">
import { Application, Graphics } from "pixi.js";
// Create the main application and the canvas
const app = new Application();
await app.init({ width: 400, height: 400 });
document.body.appendChild(app.canvas);
// Create a frame with lines
const frame = new Graphics();
frame.setStrokeStyle({ color: 0xCC5FB4, width: 5 });
const pos = { x: 100, y: 300 };
const size = { w: 200, h: 50 }
frame.moveTo(pos.x, pos.y);
frame.lineTo(pos.x, pos.y + size.h);
frame.lineTo(pos.x + size.w, pos.y + size.h);
frame.lineTo(pos.x + size.w, pos.y);
frame.lineTo(pos.x, pos.y);
frame.stroke();
app.stage.addChild(frame);
// Create a frame
const frame2 = new Graphics();
frame2.setStrokeStyle({ color: 0xCC5FB4, width: 5 });
frame2.rect(20, 100, 100, 150);
frame2.stroke();
app.stage.addChild(frame2);
// Create a ring
const ring = new Graphics();
ring.setStrokeStyle({ color: 0x4A5FB4, width: 5 });
ring.circle(200, 100, 50);
ring.stroke();
app.stage.addChild(ring);
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Set up Phaser 3 as ES6-module in JavaScript</title>
</head>
<body>
<script type="importmap">
{
"imports": {
"phaser3": "https://8observer8.github.io/libs/phaser@3.80.1/phaser.esm.min.js"
}
}
</script>
<script type="module">
import { WEBGL, Game, Scale } from "phaser3";
const config = {
type: WEBGL,
width: 800,
height: 600,
scaleMode: Scale.ScaleModes.FIT,
autoCenter: Scale.Center.CENTER_BOTH,
autoFocus: true,
scene: { preload, create, update },
backgroundColor: '#555',
};
const game = new Game(config);
function preload() {}
function create() {
this.graphics = this.add.graphics();
this.graphics.lineStyle(10, 0xff00ff);
this.graphics.strokeCircle(200, 150, 100);
}
function update() {}
</script>
</body>
</html>