# Melonjs Deployment

Use this skill when packaging, shipping or scaffolding a melonJS game, starting a...

- Repository: https://github.com/melonjs/melonJS (6430 stars)
- Category: DevOps
- License: MIT
- Last updated: 2026-11-01
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add melonjs/melonJS --skill melonjs-deployment -g -a claude-code -y`
Codex: `npx skills add melonjs/melonJS --skill melonjs-deployment -g -a codex -y`
Cursor: `npx skills add melonjs/melonJS --skill melonjs-deployment -g -a cursor -y`
Gemini CLI: `npx skills add melonjs/melonJS --skill melonjs-deployment -g -a gemini-cli -y`
Claude Code plugin marketplace: `/plugin marketplace add melonjs/melonJS`

## 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.

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# Starting and shipping a project

## Scaffolding

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

```bash
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

```bash
npm install melonjs
```

```js
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:

```html
<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:

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

```js
// 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

The rest: https://github.com/melonjs/melonJS/blob/HEAD/packages/melonjs/skills/melonjs-deployment/SKILL.md