@babel/plugin-transform-modules-amd

What is @babel/plugin-transform-modules-amd?

The @babel/plugin-transform-modules-amd package is a plugin for Babel, a JavaScript compiler, that transforms ES2015+ modules to Asynchronous Module Definition (AMD) format. This is particularly useful for integrating modern JavaScript codebases with systems that require or benefit from the AMD module pattern, such as certain web browsers and JavaScript environments.

What are @babel/plugin-transform-modules-amd's main functionalities?

Transform ES Modules to AMD

This feature automatically converts ES2015+ import statements into AMD `define` calls, making it easier to integrate with AMD-based module systems.

import { sum } from './math';
console.log(sum(1, 2));
// Transforms to:
define(['./math'], function (_math) {
  console.log(_math.sum(1, 2));
});

Dynamic Import Support

Supports the transformation of dynamic `import()` syntax to AMD's `require` calls, enabling code splitting and lazy loading of modules in AMD environments.

import('./math').then(math => {
  console.log(math.sum(1, 2));
});
// Transforms to:
require(['./math'], function (math) {
  console.log(math.sum(1, 2));
});

Other packages similar to @babel/plugin-transform-modules-amd

@babel/plugin-transform-modules-commonjs

This package transforms ES2015+ modules to CommonJS modules, similar to how @babel/plugin-transform-modules-amd transforms modules to AMD format. It's useful for environments that support CommonJS modules, offering an alternative module system transformation.

@babel/plugin-transform-modules-umd

Similar to the AMD plugin, this Babel plugin transforms ES2015+ modules to Universal Module Definition (UMD) format. UMD modules are compatible with both CommonJS and AMD environments, making this plugin a versatile choice for projects that need to support multiple module systems.

@babel/plugin-transform-modules-systemjs

This plugin transforms ES2015+ modules to SystemJS format, another module loader system that can be used in the browser. It's an alternative to AMD for developers looking for dynamic loading and other advanced module loading features in the browser.

README

@babel/plugin-transform-modules-amd

This plugin transforms ES2015 modules to Asynchronous Module Definition (AMD).

Example

In

export default 42;

Out

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

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

  exports.default = 42;
});

Installation

npm install --save-dev @babel/plugin-transform-modules-amd

Usage

Via .babelrc (Recommended)

.babelrc

{
  "plugins": ["@babel/transform-modules-amd"]
}

Via CLI

babel --plugins @babel/transform-modules-amd script.js

Via Node API

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

Options

See options for babel-plugin-transform-commonjs.