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