Cocos Creator Single File Packager

Package Cocos Creator web-mobile build into a single HTML file.

Features

• ✅ Embed all assets (JS, CSS, images, audio) into one HTML file
• ✅ Support SystemJS module loader
• ✅ Compatible with Cocos Creator 3.x

Installation

npm install

Usage

CLI

# Basic usage
node src/tool/cli.js <project-dir>

# Example
node src/tool/cli.js "D:\Projects\MyGame"

# With options
node src/tool/cli.js "D:\Projects\MyGame" --output game.html

Options

| Option | Description | Default | |--------|-------------|---------| | --build-dir | Build directory relative to project | build/web-mobile | | --output | Output file name | index.single.html | | -h, --help | Show help | | | -v, --version | Show version | |

Programmatic API

const { execute } = require('cocos-creator-single-file-package');

execute('./my-game', {
    buildDir: 'build/web-mobile',
    outputName: 'game.html'
});

Project Structure

src/
├── tool/           # Tool code (Node.js)
│   ├── cli.js      # CLI entry point
│   ├── packager.js # Core packaging logic
│   ├── config.js   # Configuration
│   └── utils.js    # Utilities
│
└── client/         # Client code (Browser)
    ├── asset-helper.js  # Asset loading
    └── hook.js          # Loader hooks

Demo

• Below is a pre-packaged demo built from the official https://github.com/cocos/cocos-test-projects repository.
• Link: https://drive.google.com/file/d/1__PhkcQYhVyV4kYHKcQvFAct9QdMjhV2/view

Notes

• This project is intentionally very large and heavy, used only to demonstrate the technique.
• Real-world projects will be significantly smaller.
• Initial loading time is relatively long because the demo contains nearly 400MB of assets, which need to be decompressed and Base64-decoded at runtime.

License

ISC