Starting and shipping a project

Scaffolding

Start from the template rather than assembling a build by hand:

npm create melonjs@latest my-game

The project name is required, without it the command prints its usage and exits. It downloads the melonJS TypeScript boilerplate (Vite, TypeScript and the debug plugin already wired in), which saves you the top-level-await and asset-path issues that a hand-rolled config usually hits first.

Adding melonJS to an existing project

npm install melonjs

import { Application, Sprite, loader } from "melonjs";

The package is a tree-shakeable ES module with TypeScript declarations included and no runtime dependencies.

A CDN build exists for quick experiments, but not for production:

<script type="module">
    import { Application } from "https://cdn.jsdelivr.net/npm/melonjs@20/+esm";
</script>

Browser support and transpiling

The published bundle targets ES2022 and uses private class members. A browser that predates that cannot parse the file at all, it fails at load, not when a feature is used, so the symptom is a blank page with a syntax error.

To support older browsers, transpile melonJS together with your own code. The usual trap is that build setups skip node_modules by default, leaving melonJS untouched however low you set your target:

// vite.config.js, esbuild downlevels dependencies too
export default { build: { target: "es2020" } };

// webpack: the default `exclude: /node_modules/` would skip melonjs
{ test: /\.js$/, exclude: /node_modules\/(?!melonjs)/, use: "babel-loader" }

Two caveats worth knowing:

• Transpiling handles syntax only. Built-in methods need separate polyfills; a bundler's target setting will never add them.
• Downlevelled private class members become WeakMap lookups, and melonJS uses them in the renderer's hot paths. This is a real trade, not a free switch.

Native apps