or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

index.md
tile.json

index.mddocs/

babel-plugin-transform-es2015-modules-amd

Babel plugin that transforms ES2015 (ES6) module syntax into Asynchronous Module Definition (AMD) format. It converts ES6 import/export statements into AMD's define() function calls, enabling ES6 modules to work in AMD-compatible environments like RequireJS.

Package Information

  • Package Name: babel-plugin-transform-es2015-modules-amd
  • Package Type: npm
  • Language: JavaScript
  • Installation: npm install --save-dev babel-plugin-transform-es2015-modules-amd

Core Imports

// Via require()
const plugin = require("babel-plugin-transform-es2015-modules-amd");

// ES module import (for plugin development)
import plugin from "babel-plugin-transform-es2015-modules-amd";

Basic Usage

Via .babelrc (Recommended)

{
  "plugins": ["transform-es2015-modules-amd"]
}

Via CLI

babel --plugins transform-es2015-modules-amd script.js

Via Node API

require("babel-core").transform("code", {
  plugins: ["transform-es2015-modules-amd"]
});

Basic Transformation Example

Input:

export default 42;

Output:

define(["exports"], function (exports) {
  "use strict";

  Object.defineProperty(exports, "__esModule", {
    value: true
  });

  exports.default = 42;
});

Capabilities

Plugin Factory Function

The main export is a plugin factory function that creates a Babel plugin.

/**
 * Creates a Babel plugin for transforming ES2015 modules to AMD format
 * @param {Object} babel - Babel object containing types and utilities
 * @param {Object} babel.types - Babel types for AST manipulation
 * @returns {Object} Babel plugin configuration object
 */
function default({ types: t }) {
  return {
    inherits: require("babel-plugin-transform-es2015-modules-commonjs"),
    pre: function() { /* initialization */ },
    visitor: {
      Program: {
        exit: function(path) { /* transformation logic */ }
      }
    }
  };
}

Configuration Options

The plugin inherits configuration options from babel-plugin-transform-es2015-modules-commonjs:

interface PluginOptions {
  /** Controls handling of top-level 'this' expressions */
  allowTopLevelThis?: boolean;
  /** Uses loose mode for __esModule property definition */
  loose?: boolean;
  /** Prevents __esModule property from being exported */
  strict?: boolean;
  /** Disables automatic interop helper usage */
  noInterop?: boolean;
  /** Enables module ID generation for AMD modules */
  moduleIds?: boolean;
  /** Custom module ID for the transformed module */
  moduleId?: string;
}

Option Details:

  • allowTopLevelThis (boolean, default: false): When true, preserves top-level this expressions; when false, replaces them with undefined
  • loose (boolean, default: false): When true, uses simple assignment exports.__esModule = true; when false, uses Object.defineProperty
  • strict (boolean, default: false): When true, prevents the __esModule property from being exported
  • noInterop (boolean, default: false): When true, avoids interop helpers and uses direct member access
  • moduleIds (boolean, default: false): When true, enables automatic module ID generation
  • moduleId (string, default: undefined): Specifies a custom module ID for the AMD module

Plugin Structure

The returned plugin object contains the following properties:

interface BabelPlugin {
  /** Inherits functionality from the CommonJS modules plugin */
  inherits: any;
  /** Pre-transformation initialization function */
  pre(): void;
  /** AST visitor configuration */
  visitor: {
    Program: {
      exit(path: any): void;
    };
  };
}

Internal Utilities

While not part of the public API, these internal functions and constants demonstrate the plugin's capabilities:

/**
 * Template for creating AMD define() function wrapper
 */
const buildDefine: TemplateFunction;

/**
 * Template for creating AMD factory function
 */
const buildFactory: TemplateFunction;

/**
 * Validates if a call expression is a valid require() call
 * @param {Object} path - Babel AST path
 * @returns {boolean} True if valid require() call
 */
function isValidRequireCall(path: any): boolean;

/**
 * Gets module name for AMD module (inherited from CommonJS plugin)
 * @returns {string|undefined} Module name if configured
 */
this.getModuleName(): string | undefined;

Module Transformation Behavior

ES6 Import/Export Patterns

The plugin transforms various ES6 module patterns:

Named Imports:

// Input
import { foo } from "module";

// Output (within define wrapper)
define(["module"], function (_module) {
  // foo is accessed as _module.foo
});

Default Imports:

// Input
import foo from "module";

// Output (within define wrapper)
define(["module"], function (_module) {
  var foo = _module.default;
});

Namespace Imports:

// Input
import * as foo from "module";

// Output (within define wrapper)
define(["module"], function (foo) {
  // foo contains entire module
});

Mixed Imports:

// Input
import foo, { bar } from "module";

// Output (within define wrapper)
define(["module"], function (_module) {
  var foo = _module.default;
  // bar accessed as _module.bar
});

Export Transformations

Default Export:

// Input
export default value;

// Output (within define wrapper)
define(["exports"], function (exports) {
  exports.default = value;
});

Named Exports:

// Input
export { foo, bar };

// Output (within define wrapper)
define(["exports"], function (exports) {
  exports.foo = foo;
  exports.bar = bar;
});

AMD Module Structure

All transformed modules follow this structure:

define([dependencies], function (dependencyParams) {
  "use strict";
  
  // Module body with transformed imports/exports
  // Original ES6 code converted to CommonJS-style
  
  return exports; // or module.exports equivalent
});

Error Handling

The plugin handles various edge cases:

  • Invalid require() calls: Only processes valid require("string") patterns
  • Scope conflicts: Automatically renames conflicting module, exports, and require identifiers
  • Circular dependencies: Relies on AMD loader's circular dependency resolution
  • Missing dependencies: Dependencies are detected automatically from import statements

Usage Examples

With Module ID

// .babelrc
{
  "plugins": [
    ["transform-es2015-modules-amd", {
      "moduleIds": true,
      "moduleId": "my-custom-module"
    }]
  ]
}

// Output includes module ID
define("my-custom-module", ["exports"], function (exports) {
  // module code
});

With Loose Mode

// .babelrc
{
  "plugins": [
    ["transform-es2015-modules-amd", {
      "loose": true
    }]
  ]
}

// Uses simple assignment instead of Object.defineProperty
define(["exports"], function (exports) {
  exports.__esModule = true; // instead of Object.defineProperty
});

With No Interop

// .babelrc
{
  "plugins": [
    ["transform-es2015-modules-amd", {
      "noInterop": true
    }]
  ]
}

// Avoids interop helpers for default imports
define(["module"], function (_module) {
  var foo = _module; // direct access instead of _module.default
});

Dependencies

The plugin requires these dependencies:

  • babel-plugin-transform-es2015-modules-commonjs: ^6.24.1 (inherited functionality)
  • babel-template: ^6.24.1 (for AST template building)
  • babel-runtime: ^6.22.0 (for runtime helper functions)

Types

// Internal state interface (not exported)
interface PluginState {
  sources: Array<[any, any]>;
  sourceNames: { [key: string]: boolean };
  bareSources: any[];
  hasExports: boolean;
  hasModule: boolean;
  ran: boolean;
}

// Template function type
interface TemplateFunction {
  (replacements: { [key: string]: any }): any;
}