Gulp AMD Bundler

1.32.0 · abandoned · verified Tue Apr 21

gulp-amd-bundler is a Gulp plugin designed to consolidate an Asynchronous Module Definition (AMD) module and its dependencies into a single output file. Originally catering to projects utilizing AMD loaders like RequireJS, it was instrumental in optimizing browser-side JavaScript delivery by reducing HTTP requests. The package is currently at version 1.32.0 and appears to be unmaintained, with its `engines` field specifying Node.js `>= 0.8.0`, a version released over a decade ago. In the modern JavaScript ecosystem, AMD has largely been superseded by ECMAScript Modules (ESM) and more advanced bundlers such as Webpack, Rollup, and Parcel, which offer superior tree-shaking, code splitting, and broader module format support. This plugin's relevance is now primarily for legacy AMD-based projects requiring maintenance or migration rather than new development.

Common errors

```
Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: .../node_modules/gulp-amd-bundler/index.js
```
cause Attempting to import `gulp-amd-bundler` using `import` syntax (ESM) in a Gulpfile that is configured as an ES Module.

fix Change your Gulpfile to use CommonJS `require` syntax: `const amdBundler = require('gulp-amd-bundler');`. If your Gulpfile is a `.mjs` file or your `package.json` has `"type": "module"`, consider reverting to a standard `gulpfile.js` for compatibility with this older plugin.
```
ReferenceError: define is not defined
```
cause An AMD module is being executed in an environment where an AMD loader's `define` function is not globally available.

fix Ensure that your bundled output includes an AMD loader (like RequireJS or a simplified shim) in the browser, or that the environment where the AMD code runs correctly provides the `define` and `require` globals. This Gulp plugin bundles AMD modules, but typically relies on the browser environment to have the AMD loader available to execute them, or for the bundled output to be self-contained if the plugin includes a loader.
```
TypeError: Cannot read properties of undefined (reading 'pipe')
```
cause Attempting to use `amdBundler()` without piping a Gulp stream into it, or `gulp.src()` is not returning a stream.

fix Always pass file streams to Gulp plugins: `gulp.src('your-amd-entry.js').pipe(amdBundler()).pipe(gulp.dest('output-dir'));` Ensure `gulp` is correctly installed and imported.

Warnings

breaking This package is considered abandoned and specifies Node.js `>= 0.8.0` in its engine requirements. It is highly unlikely to work without issues on modern Node.js versions (v14+), potentially leading to runtime errors or module resolution failures.
Fix: Use an older Node.js version (e.g., Node.js 10.x or 12.x) via `nvm` or a Docker container if absolutely necessary. For new projects, migrate away from AMD and this plugin to a modern bundler like Webpack or Rollup.
breaking AMD (Asynchronous Module Definition) is a legacy module system. Modern JavaScript development primarily uses ECMAScript Modules (ESM). Relying on AMD for new projects is not recommended, and tooling support for AMD is declining.
Fix: Migrate existing AMD codebases to ESM if possible, or use modern bundlers that can handle AMD as a specific input format while targeting ESM/CommonJS output for wider compatibility.
gotcha This Gulp plugin is designed for CommonJS environments, which is typical for older Gulpfiles. Attempting to use `import` syntax (ESM) in your `gulpfile.js` with this plugin will likely result in an `ERR_REQUIRE_ESM` error.
Fix: Ensure your `gulpfile.js` uses CommonJS `require()` syntax. If your project uses ESM for other parts, keep `gulpfile.js` as a `.js` file without `"type": "module"` in `package.json` or explicitly configure Gulp for CJS.
gotcha As an abandoned package, `gulp-amd-bundler` will not receive updates for bug fixes, performance improvements, or security vulnerabilities. Using it in production environments introduces potential risks.
Fix: Conduct a thorough security review if use is unavoidable. Prioritize migration to actively maintained alternatives or modern bundling solutions for long-term project health and security.

Install

npm install gulp-amd-bundler npm
yarn add gulp-amd-bundler yarn
pnpm add gulp-amd-bundler pnpm

Imports

amdBundler
wrong:
```
import amdBundler from 'gulp-amd-bundler';
```
correct:
```
const amdBundler = require('gulp-amd-bundler');
```
As an older Gulp plugin, it is designed for CommonJS environments. Attempting to import it using ES Module syntax (e.g., in a `gulpfile.mjs` or a project with `"type": "module"`) will result in an `ERR_REQUIRE_ESM` error.
define
wrong:
```
import { define } from 'gulp-amd-bundler';
```
correct:
```
// In your AMD modules:
define(['dependency'], function(dep) { ... });
```
AMD modules use a global `define` function (typically provided by an AMD loader like RequireJS) to declare modules and their dependencies, not an export from this Gulp plugin.
stream
wrong:
```
amdBundler({ entry: 'src/main.js', output: 'dist/bundle.js' });
```
correct:
```
gulp.src('src/main.js').pipe(amdBundler()).pipe(gulp.dest('dist'));
```
Gulp plugins operate on streams. You pass files into the plugin using `gulp.src()` and then pipe the output to `gulp.dest()`. The plugin itself does not typically handle file I/O directly via options.

Quickstart

This quickstart demonstrates how to set up a basic Gulp task using `gulp-amd-bundler` to bundle simple AMD modules. It includes dummy AMD modules and a Gulpfile that uses `require` for compatibility. The bundled output is concatenated into `bundle.js` for browser consumption.

const gulp = require('gulp');
const amdBundler = require('gulp-amd-bundler');
const concat = require('gulp-concat');

// Dummy AMD module for demonstration
// Save this as `src/lib/my-module.js`
/*
define('my-module', [], function() {
  return { name: 'My Module', version: '1.0' };
});
*/

// Entry point AMD module
// Save this as `src/main.js`
/*
define(['./lib/my-module'], function(myModule) {
  console.log(`Main module loaded. ${myModule.name} v${myModule.version}`);
  return {
    start: function() {
      document.getElementById('app').textContent = `App started with ${myModule.name}`;
      console.log('App started!');
    }
  };
});
*/

function bundleAmd() {
  return gulp.src('src/main.js')
    .pipe(amdBundler({
      // Options for gulp-amd-bundler, e.g., base path for modules
      // Note: This plugin's options are not extensively documented
      // and might require an underlying AMD loader configuration.
      // For a simple single file, options might not be strictly needed.
    }))
    .pipe(concat('bundle.js')) // Combine the bundled AMD output into one file
    .pipe(gulp.dest('dist'));
}

// An example task to prepare a basic HTML file to load the bundle
function html() {
  return gulp.src('src/index.html')
    .pipe(gulp.dest('dist'));
}

exports.bundle = gulp.series(bundleAmd, html);
exports.default = exports.bundle;

// To run this:
// 1. npm init -y
// 2. npm install gulp gulp-amd-bundler gulp-concat --save-dev
// 3. Create `src/lib/my-module.js` and `src/main.js` with the content above.
// 4. Create `src/index.html` with a script tag to load `dist/bundle.js` and an element with id='app'.
// 5. Run `gulp bundle`

view raw JSON →