JavaScript Transpilers

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

Popular options

• Babel (42k ⭐) — 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.

// Babel Input: ES2015 arrow function
[1, 2, 3].map(n => n + 1);

// Babel Output: ES5 equivalent
[1, 2, 3].map(function(n) {
  return n + 1;
});

• Esbuild (35k ⭐) — 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.

• TypeScript (91k ⭐) — 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.

Under the hood

Most transpilers use Abstract Syntax Tree (AST) as intermediate format while processing source file, transforming syntax, performing optimizations.

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

AST allows for this to take place because it breaks down code and organizes it with all of its metadata in a hierarchical tree.

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.

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.

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 allow developers to write future facing code, even though the current version of the language isn’t supported in all environments. (Henry Zhu)

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