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) {
// 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) {
  if (info.done) {
  } 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)

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 = {
            case 0:

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


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

Cracking The Frontend Interview, Part 5: React

React is the hottest technology in web development nowadays, working on it is exciting but preparing for interviews is really a pain in the neck

Become a Fullstack JavaScript Developer, Part 1: The Motivation

The motivation behind my decision to become a fullstack JavaScript developer and whether you should follow that path

How hard could it be to become an indie maker?

Being a maker is all about building something that solves a problem, or brings happiness to other people

On the rise of JAMstack

JAMstack is an abstract solution stack which focuses more on categories of tools than specific ones