babel/doc/usage/transformers.md

layout	title	description	permalink
docs	Transformers	What are the various transformers?	/docs/usage/transformers/

Standard

• arrowFunctions
• classes
• computedPropertyNames
• constants
• defaultParameters
• destructuring
• forOf
• generators
• letScoping
• modules
• propertyMethodAssignment
• propertyNameShorthand
• restParameters
• spread
• templateLiterals
• unicodeRegex

Experimental

• abstractReferences
• arrayComprehension
• generatorComprehension
• exponentiationOperator
• objectSpread

Disabled by default

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

Other

specMemberExpressionLiterals

Transform keywords and reserved word properties in member expressions into string literals:

obj.default = "";
obj.throw = "";
obj.case = "";
obj.delete = "";

to

obj["default"] = "";
obj["throw"] = "";
obj["case"] = "";
obj["delete"] = "";

specPropertyLiterals

Transforms keywords and reserved word property keys into string literals:

var obj = {
  default: "",
  throw: "",
  case: "",
  delete: ""
};

to

var obj = {
  "default": "",
  "throw": "",
  "case": "",
  "delete": ""
};

useStrict

ES6 modules are strict mode by default, this is a restricted variant of JavaScript that enables more optimisations and better errors.

See the MDN article Strict mode for more information.

Not recommended

It's highly recommended not to disable this transformer.

Playground

• memoizationOperator
• methodBinding
• objectGetterMemoization

Disabled by default

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

Other

react

Optional transformers

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

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

6to5 --optional transformerName

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();
});

coreAliasing

6to5 will uses various ES6 methods around your code such as Array.from and Object.assign. This usually means that the use of a global polluting polyfill is required, fortunately there's the coreAliasing transformer.

This transformer transforms code such as

var arr = Array.from("foobar"); // ["f", "o", "o", "b", "a", "r"]

into

var core = require("core-js");

var arr = core.Array.from("foobar");

Not only that but it can also transform iterator construction so

var iterator = "foobar"[Symbol.iterator]();
iterator.next(); // { done: false, value: "f" }

becomes

var core = require("core-js");

var iterator = core.$for.getIterator("foobar");

This means that you can use every single 6to5 feature without a globally polluting polyfill, minus caveats and all.

This is fantastic for library authors as it means that you can write your libraries with 6to5 and utilise all ES6 methods and syntax without polluting your users global scope that may lead to collisions and nasty bugs.

If you use this transformer then the package core-js is required. Run npm install core-js --save to add it to your current node/browserify project.

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.

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";

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;