Modules · Babel (5.x)

See FAQ - What is a module formatter? for module formatter terminology.

Babel has the ability to compile ES6 modules to the module system of your choice. You can even easily create your own.

Usage

$ babel --modules common script.js

babel.transform('import "foo";', { modules: "common" });

Formats

Common (Default)

CommonJS (CJS) Modules/1.1

Usage

$ babel --modules common

Example

Exports:

export {test};
export var test = 5;

exports.test = test;
var test = exports.test = 5;

Bare import:

import "foo";

require("foo");

Default import:

import foo from "foo";

var foo = _interopRequire(require("foo"));

Wildcard import:

import * as foo from "foo";

var foo = _interopRequireWildcard(require("foo"));

Named import:

import {bar, baz} from "foo";
let x = bar() + baz();

var _bar$baz = require("foo");
var x = _bar$baz.bar() + _bar$baz.baz();

Named alias import:

import {bar as baz} from "foo";
let x = baz();

var _baz = require("foo");
var x = _baz.bar();

Interop

In order to encourage the use of CommonJS and ES6 modules, when exporting a default export with no other exports module.exports will be set in addition to exports["default"].

export default test;

exports["default"] = test;
module.exports = exports["default"];

If you don't want this behaviour then you can use the commonStrict module formatter.

AMD

Asynchronous Module Definition (AMD)

Usage

$ babel --modules amd

Example

import foo from "foo";

export function bar() {
  return foo("foobar");
}

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

  function _interopRequire(obj) {
    return obj && obj.__esModule ? obj["default"] : obj;
  }

  exports.bar = bar;
  var foo = _interopRequire(_foo);

  function bar() {
    return foo("foobar");
  }
});

You can optionally specify to include the module id (using the --module-ids argument):

define("filename", ["exports", "foo"], function (exports, _foo) {})

System

Usage

$ babel --modules system

Example

import foo from "foo";

export function bar() {
  return foo("foobar");
}

System.register("bar", ["foo"], function (_export) {
  "use strict";

  var __moduleName = "bar";

  var foo;
  function bar() {
    return foo("foobar");
  }
  return {
    setters: [function (m) {
      foo = m.default;
    }],
    execute: function () {
      _export("bar", bar);
    }
  };
});

UMD

Universal Module Definition (UMD)

Usage

$ babel --modules umd

Example

import foo from "foo";

export function bar() {
  return foo("foobar");
}

(function (factory) {
  if (typeof define === "function" && define.amd) {
    define(["exports", "foo"], factory);
  } else if (typeof exports !== "undefined") {
    factory(exports, require("foo"));
  }
})(function (exports, _foo) {
  "use strict";

  function _interopRequire(obj) {
    return obj && obj.__esModule ? obj["default"] : obj;
  }

  exports.bar = bar;
  var foo = _interopRequire(_foo);

  function bar() {
    return foo("foobar");
  }
});

Ignore

Usage

$ babel --modules ignore

Example

import foo from "foo";

export function bar() {
  return foo("foobar");
}

function bar() {
  return foo("foobar");
}

Custom

You can alternatively specify module names instead of one of the built-in types.

Usage

$ babel --modules custom-module-formatter

Example

node_modules/custom-module-formatter/index.js

module.exports = ModuleFormatter;

function ModuleFormatter() {}

ModuleFormatter.prototype.transform = function (ast) {
  // this runs after all transformers have had their turn at modifying the ast
  // feel free to modify this however
};

ModuleFormatter.prototype.importDeclaration = function (node, nodes) {
  // node is an ImportDeclaration
};

ModuleFormatter.prototype.importSpecifier = function (specifier, node, nodes) {
  // specifier is an ImportSpecifier
  // node is an ImportDeclaration
};

ModuleFormatter.prototype.exportDeclaration = function (node, nodes) {
  // node is an ExportDeclaration
};

ModuleFormatter.prototype.exportSpecifier = function (specifier, node, nodes) {
  // specifier is an ExportSpecifier
  // node is an ExportDeclaration
};