ES6 Transpilers

What is a Transpiler

A source-to-source compiler, transcompiler or transpiler is a type of compiler that takes the source code of a program written in one programming language as its input and produces the equivalent source code in another programming language. A source-to-source compiler translates between programming languages that operate at approximately the same level of abstraction, while a traditional compiler translates from a higher level programming language to a lower level programming language. wiki

List of ES6 Transpilers

1. Babel: To transpile ES6 into ES5 for static builds
2. Babelify: To incorporate babel into your Gulp, Grunt, or npm run build process
3. Traceur compiler: ES6 features > ES5. Includes classes, generators, promises, destructuring patterns, default parameters & more.
4. es6ify: Traceur compiler wrapped as a Browserify v2 transform

ES6 to ES5 Transpilation Example

For this example we are using Babel’s live transpiler to see the code in action.

ES6 Code

import config from './config/env';
import app from './config/express';

// listen on port config.port
app.listen(config.port, () => {
  debug(`server started on port ${config.port} (${config.env})`);
});

export default app;

ES5 Converted

'use strict';

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

var _env = require('./config/env');

var _env2 = _interopRequireDefault(_env);

var _express = require('./config/express');

var _express2 = _interopRequireDefault(_express);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

// listen on port config.port
_express2.default.listen(_env2.default.port, function () {
  debug('server started on port ' + _env2.default.port + ' (' + _env2.default.env + ')');
});

exports.default = _express2.default;

Sources

1. https://scotch.io
2. https://github.com/bevacqua/es6#introduction
3. https://github.com/addyosmani/es6-tools