Using esbuild for Moodle Plugin AMD Modules

Purpose

To compile modern JavaScript source files in amd/src/ into AMD-compatible .min.js files in amd/build/ using esbuild, in a way that’s fully Moodle-compliant but avoids Grunt.

Directory Structure

Your Moodle plugin should contain:

mod/yourplugin/

├── amd/

│ ├── src/

│ │ ├── editor.js

│ │ └── runtime.js

│ └── build/ ← (created automatically by esbuild)

Each source file should begin with a valid AMD define() block:

// amd/src/editor.js
define(['jquery'], function($) {
return {

init: function(cfg) {

console.log('Hello from editor.js', cfg);
}

};

});

Step 1: Initialize NPM (once)

From your plugin root:

npm init -y

This creates a package.json file.

Step 2: Install esbuild

npm install --save-dev esbuild

This installs esbuild locally into your plugin.

Step 3: Create build.js file

Create a file named build.js in the plugin root:

touch build.js

Paste in:

// build.js
const esbuild = require('esbuild');
esbuild.build({

entryPoints: [‘amd/src/editor.js’, ‘amd/src/runtime.js’],

outdir: ‘amd/build’,

outExtension: { ‘.js’: ‘.min.js’ },

format: ‘iife’, // Moodle-compatible format

bundle: false,

minify: true,

target: [‘es2015’]

}).then) => {

console.log(' JS build complete.');

}).catcherr) => {

console.error(' Build failed:', err);
process.exit(1);

});

Step 4: Run the build

From your plugin root:

node build.js

You should see:

JS build complete.

Then verify:

ls amd/build/

You should see:

editor.min.js

runtime.min.js

⚙️ Optional: Add NPM build script

Edit package.json to add:

“scripts”: {

“build”: “node build.js”

}

Now you can build with:

npm run build

TL;DR Summary

1. npm init -y

npm install --save-dev esbuild

2. Create build.js with AMD-compatible config

3. Run node build.js or npm run build

4. Moodle will load your AMD modules from amd/build/*.min.js