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