Top 3 JavaScript Transpilers/Compilers

JavaScript is the only programming language beside HTML and CSS has the privilege to run on browsers, that’s why there are so many languages used JavaScript as transpile target.

Transpilers (also called transcompilers, or compilers) in JavaScript are source-to-source compilers that transform source code in non-JavaScript languages (CoffeeScript, TypeScript, LiveScript, etc.) or in modern JavaScript versions (ES2015, ES2017, ESNext, etc.) to equivalent JavaScript source code that meets some conditions (browser compatible, minified, strict, etc.)

Transpilers allow developers to write future facing code, even though the current version of the language isn’t supported in all environments. (Henry Zhu)

You might see people use compiler and transpiler interchangeably in JavaScript world. But keep in mind a source-to-source compiler translates between programming languages that operate at approximately the same level of abstraction; while a traditional compiler translates from a higher-level programming language to a lower-level programming language like C to assembler or Java to bytecode.

1. Babel (43k ⭐) — The most dominant JavaScript transpiler, a toolchain that is mainly used to convert ECMAScript 2015+ code into a backward-compatible version of JavaScript in current and older browsers or environments. Babel can transform syntax, polyfill features that are missing in your target environment, transform source code, and many more.

// ES2020 nullish coalescing
function greet(input) {
  return input ?? "Hello world";
}

// Babel Output: ES5 equivalent
function greet(input) {
  return input != null ? input : "Hello world";
}

2. Esbuild (37.4k ⭐) — This is more of a web bundler, but it has loaders that behave like JavaScript transpiler: all modern JavaScript syntax is supported, built-in support for parsing TypeScript syntax and discarding the type annotations.

3. TypeScript (98.4k ⭐) — An open-source programming language developed and maintained by Microsoft. It is a strict syntactical superset of JavaScript ,adds optional static typing to the language, and ultimately transpiled to JavaScript.

As well as extending JavaScript, TypeScript also transpiles your code to match multiple ECMAScript standards, which gives you a way to support multiple browsers with less effort, and to try out proposed ECMAScript standards early on.

Check out the list of languages that compile to JavaScript and many other transpilers for more information.

How these transpilers work under the hood?

Please check out this awesome super tiny compiler. Here’s a summary of how it works:

Most transpilers use Abstract Syntax Tree (AST) as intermediate format while processing source file, transforming syntax, performing optimizations. AST allows for this to take place because it breaks down code and organizes it with all of its metadata in a hierarchical tree.

Code --(parse)--> AST --(transform)--> AST --(generate)--> Code

1. Parsing takes raw code and turning it into AST, typically gets broken down into two phases:

• Lexical Analysis takes the raw code and splits it apart into these things called tokens by a thing called a tokenizer (or lexer). Tokens are an array of tiny little objects that describe an isolated piece of the syntax. They could be numbers, labels, punctuation, operators, whatever.

• Syntactic Analysis takes the tokens and reformats them into a representation that describes each part of the syntax and their relation to one another.

2. Transformation takes the AST from the last step and makes changes to it. It can manipulate the AST in the same language or it can translate it into an entirely new language.

When transforming the AST we can manipulate nodes by adding/removing/replacing properties, we can add new nodes, remove nodes, or we could leave the existing AST alone and create an entirely new one based on it.

3. Code Generation takes the transformed AST and string-ify code back out. Code generators work several different ways, some will reuse the tokens from earlier, others will have created a separate representation of the code so that they can print nodes linearly.