Bundling and Packaging

Bundling is the process of combining your source files and external dependencies into a single, distribution-ready file. The Live Extension Host expects a standalone JavaScript file and will not resolve node_modules at runtime, so bundling is essential if you use third-party npm packages or split your code across multiple files.

A new extension project comes with an esbuild-based build.ts script in the project root. You can edit this file to customise your build, or replace esbuild with another build system.

The manifest.json

Your manifest.json declares metadata that Live and the CLI both read:

{
    "name": "my-extension",
    "author": "Your Name or Organisation",
    "version": "1.0.0",
    "entry": "dist/extension.js",
    "minimumApiVersion": "1.0.0"
}

Building

An extension created with create-extension comes with helpful scripts for development:

Script	What it does
npm start	Builds and launches Live’s Extension Host with your extension.
npm run build	Production bundle of src/extension.ts → dist/extension.js (minified, no sourcemaps).
npm run build:dev	Dev bundle (sourcemaps, not minified).
npm run package	Builds for production and produces a .ablx archive ready to share.

Packaging as .ablx

npm run package runs npm run build:production then packages your extension into a .ablx file which you can install and share.

You can also call the CLI directly to control the output path or include additional files:

# Custom output path
npx extensions-cli package -o dist/my-extension.ablx

# Bundle additional assets alongside the entry file
npx extensions-cli package -i assets templates/index.html

Included paths can be individual files or directories, which get added recursively. All paths must be relative to the extension directory and cannot reference files outside it.

A user installs the resulting .ablx file by dropping into the Extensions page in Live’s settings.

The auto-generated build script meets the minimum requirements of building an extension. If you have more specific needs (custom module loaders, esbuild plugins) you can learn more about setting up esbuild here: https://esbuild.github.io/getting-started/.

Using a different bundler

If you prefer a different tool, replace build.ts and update the build script in package.json. extensions-cli run and package only care about the output file declared in manifest.json, so they continue to work regardless of how you build.

Notes

• Always build before packaging. extensions-cli package does not run your build step.
• A properly bundled extension is a single JavaScript file, a manifest.json, plus any extra assets you explicitly include.