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.

Related Articles

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

Become a Fullstack JavaScript Developer, Part 5: The DevOps

Minimum technologies to manage own product on private server using containerization

Bull - queue system for handling distributed jobs and messages in Node

Bull is the fastest, most reliable, Redis-based queue for Node. I have been using it for years to handle async jobs and schedule messages

Cracking The Frontend Interview, Part 4: JavaScript

JavaScript is the heart of web development, be prepared to be asked multiple confusing advanced concepts about it during frontend interview