Babel - The Best JavaScript Compiler

We all know Babel is used to convert JavaScript code between versions but quite confused whether to call it a compiler, transpiler or transcompiler.

People tend to call Babel as compiler and transpiler interchangeably. I prefer to call Babel as a transpiler, but it’ll become a true compiler when it supports compiling to WebAssembly in the future.

Main concepts

Compiler is a tool that translates source code written in high-level programming language to another low-level language (object code, bytecode, machine code).

Transpiler (also called source-to-source compiler or transcompiler) is a tool that translates source code between high-level languages. The output code is still human readable.

A low-level language is a programming language that provides little or no abstraction of programming concepts and is very close to writing actual machine instructions. Examples of low-level languages are assembly, machine code, and bytecode.

Examples of high-level programming languages in active use today include Python, Visual Basic, Delphi, Perl, PHP, ECMAScript, Ruby, C#, Java and many others.

Babel Toolchain

Babel is a JavaScript toolchain that is mainly used to convert ECMAScript 2015+ code into a backwards compatible version of JavaScript in current and older browsers or environments.

Babel has support for the latest version of JavaScript through syntax transformers, allow you to use new syntax, right now without waiting for browser support. Babel can convert JSX syntax and strip out type annotations.

Since Babel assumes that your code will run in an ES5 environment it uses ES5 functions. So if you’re using an environment that has limited or no support for ES5 such as lower versions of IE then using @babel/polyfill will add support for these methods.

// hello.js (async functions)
async function hello(name) {
  console.log(name)
}

// hello.js (async functions into generators)
'use strict'

function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
  try {
    var info = gen[key](arg)
    var value = info.value
  } catch (error) {
    reject(error)
    return
  }
  if (info.done) {
    resolve(value)
  } else {
    Promise.resolve(value).then(_next, _throw)
  }
}

function _asyncToGenerator(fn) {
  return function () {
    var self = this,
      args = arguments
    return new Promise(function (resolve, reject) {
      var gen = fn.apply(self, args)
      function _next(value) {
        asyncGeneratorStep(gen, resolve, reject, _next, _throw, 'next', value)
      }
      function _throw(err) {
        asyncGeneratorStep(gen, resolve, reject, _next, _throw, 'throw', err)
      }
      _next(undefined)
    })
  }
}

function hello(_x) {
  return _hello.apply(this, arguments)
}

function _hello() {
  _hello = _asyncToGenerator(
    /*#__PURE__*/ regeneratorRuntime.mark(function _callee(name) {
      return regeneratorRuntime.wrap(function _callee$(_context) {
        while (1) {
          switch ((_context.prev = _context.next)) {
            case 0:
              console.log(name)

            case 1:
            case 'end':
              return _context.stop()
          }
        }
      }, _callee)
    })
  )
  return _hello.apply(this, arguments)
}