- name
- melonjs-deployment
- description
- Use this skill when packaging, shipping or scaffolding a melonJS game — starting a project with create-melonjs, building for the web, wrapping as a native app with Capacitor or Cordova, publishing to WeChat Mini Games or Facebook Instant Games, browser support and transpiling. Triggers on: create-melonjs, scaffold, new project, build, deploy, publish, Capacitor, Cordova, native app, iOS, Android, WeChat, Instant Games, browser support, transpile, ES2022, bundle size, tree-shaking.
- license
- MIT
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
targetsetting will never add them. - Downlevelled private class members become
WeakMaplookups, and melonJS uses them in the renderer's hot paths. This is a real trade, not a free switch.