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 quite confused 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.

Related Posts

JavaScript build tools

This is a confusing and blurring category in JavaScript tooling ecosystem

What is static rendering?

Static rendering is a strategy that eagerly generates a separate HTML file for each URL ahead of time at build time

JavaScript transpilers

Transpilers in JavaScript are source-to-source compilers that can transform syntax and polyfill features

The benefits of blogging

While the blogging scene has developed over the last decade, the benefits of blogging are still plentiful