Transformers

See FAQ - What is a transformer? for transformer terminology.

ES3

• es3.memberExpressionLiterals
• es3.propertyLiterals

ES5

• es5.properties.mutators

ES6

• es6.arrowFunctions
• es6.blockScoping
• es6.classes
• es6.constants
• es6.destructuring
• es6.forOf
• es6.modules
• es6.parameters.default
• es6.parameters.rest
• es6.properties.computed
• es6.properties.shorthand
• es6.spread
• es6.tailCall
• es6.templateLiterals
• es6.unicodeRegex

ES7 (Experimental)

• es7.abstractReferences
• es7.arrayComprehension
• es7.generatorComprehension
• es7.exponentiationOperator
• es7.objectSpread

Disabled by default

These are only usable if you enable experimental support. See experimental usage for information.

Other

• react
• regenerator (generators/async functions)
• useStrict

Optional

babel provides various optional transformers for those of you who want to take your code that extra mile.

require("babel").transform("code", { optional: ["transformerName"] });

$ babel --optional transformerName

selfContained

The selfContained optional transformer does three things:

• Automatically requires babel-runtime/regenerator when you use generators/async functions.
• Automatically requires babel-runtime/core-js and maps ES6 static methods and built-ins.
• Removes the inline babel helpers and uses the module babel-runtime/helpers instead.

What does this actually mean though? Basically, you can use built-ins such as Promise, Set, Map, Symbol as well as all the babel features that require a polyfill seamlessly, without global pollution making it great for libraries.

External package required

The package babel-runtime is required for this transformer. Run npm install babel-runtime --save to add it to your current node/webpack/browserify project.

Regenerator aliasing

Whenever you use a generator function or async function:

function* foo() {

}

async function bar() {

}

the following is generated:

"use strict";

var foo = regeneratorRuntime.mark(function foo() {
  ...
});

function bar() {
  return regeneratorRuntime.async(function bar$(context$1$0) {
    ...
  }, null, this);
}

This isn't ideal as then you have to include the regenerator runtime which pollutes the global scope.

Instead what the selfContained transformer does it transpile that to:

"use strict";

var _regeneratorRuntime = require("babel-runtime/regenerator");

var foo = _regeneratorRuntime.mark(function foo() {
  ...
});

function bar() {
  return _regeneratorRuntime.async(function bar$(context$1$0) {
    ...
  }, null, this);
}

This means that you can use the regenerator runtime without polluting your current environment.

core-js aliasing

Sometimes you may want to use new built-ins such as Map, Set, Promise etc. Your only way to use these is usually to include a globally polluting polyfill.

What the selfContained transformer does is transform the following:

var sym = Symbol();

var promise = new Promise;

console.log(arr[Symbol.iterator]());

into the following:

"use strict";

var _core = require("babel-runtime/core-js");

var sym = _core.Symbol();

var promise = new _core.Promise();

console.log(_core.$for.getIterator(arr));

This means is that you can seamlessly use these native built-ins and static methods without worrying about where they come from.

NOTE: Instance methods such as "foobar".includes("foo") will not work.

Helper aliasing

Usually babel will place helpers at the top of your file to do common tasks to avoid duplicating the code around in the current file. Sometimes these helpers can get a little bulky and add unneccessary duplication across files. The selfContained transformer replaces all the helper calls to a module.

That means that the following code:

import foo from "bar";

usually turns into:

"use strict";

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

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

the selfContained transformer however turns this into:

"use strict";

var _babelHelpers = require("babel-runtime/helpers");

var foo = _babelHelpers.interopRequire(require("bar"));

asyncToGenerator

Transforms async functions to a generator that uses a helper. This is useful if you don't want to use regenerator or bluebird.

async function foo() {
  await bar();
}

to

var _asyncToGenerator = function (fn) {
  ...
};

var foo = _asyncToGenerator(function* () {
  yield bar();
});

bluebirdCoroutines

Transforms async functions to their equivalent bluebird method.

async function foo() {
  await bar();
}

to

var Bluebird = require("bluebird");

var foo = Bluebird.coroutine(function* () {
  yield bar();
});

spec.protoToAssign

The protoToAssign optional transformer will transform all __proto__ assignments to a method that will do a shallow copy of all properties.

This means that the following will work:

var foo = { a: 1 };
var bar = { b: 2 };
bar.__proto__ = foo;
bar.a; // 1
bar.b; // 2

however the following will not:

var foo = { a: 1 };
var bar = { b: 2 };
bar.__proto__ = foo;
bar.a; // 1
foo.a = 2;
bar.a; // 1 - should be 2 but remember that nothing is bound and it's a straight copy

This is a case that you have to be aware of if you intend to use this transformer.

spec.typeofSymbol

ES6 introduces a new native type called symbols. This transformer wraps all typeof expressions with a method that replicates native behaviour. (ie. returning "symbol" for symbols)

typeof Symbol() === "symbol";

to

var _typeof = function (obj) {
  return obj && obj.constructor === Symbol ? "symbol" : typeof obj;
};

_typeof(Symbol()) === "symbol";

spec.undefinedToVoid

Some JavaScript implementations allow undefined to be overwritten, this may lead to peculiar bugs that are extremely hard to track down.

This transformer transforms undefined into void 0 which returns undefined regardless of if it's been reassigned.

foo === undefined;

to

foo === void 0;

validation.undeclaredVariableCheck

Throws errors on references to undeclared variables.

Playground

• playground.memoizationOperator
• playground.methodBinding
• playground.objectGetterMemoization

Disabled by default

These are only usable if you enable playground support. See playground usage for information.