Is Babel a compiler or transpiler?

Mar 22, 2020 • ☕️ 2 min read

We all know Babel is used to convert JavaScript code between versions but don’t know whether to call it a compiler, transpiler or transcompiler!

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

Conclusion

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

Reading More

Imposter syndrome self-diagnosis

People say Impostor Syndrome makes you feel like an intellectual fraud. Are you suffering from this phenomenon?

Cracking The Frontend Interview, Part 6: WebDev

A learning path to cover all important web development concepts to build a world-class modern website ultimately

What's Wrong with CSS?

Some noted problems that might hold CSS back and open up new development of preprocessors or CSS-in-JS

Long-standing CSS Methodologies

The industry darling BEM, the rebellious maverick Atomic CSS, and other incompetent solutions