JavaScript transpilers

Feb 21, 2020 • ☕️ 2 min read

Transpilers (also called transcompilers) 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.)

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

The Abstract Syntax Tree (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.

Babel is 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.

TypeScript is 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.

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.

Related Posts

JavaScript color picker libraries

Notable libraries to help user pick desired colors seemlessly on your websites

Common design principles (SOLID, OOP, DRY, WET, etc.)

Writing a code which satisfies present requirements, also which can satisfy future requirement easily

Open-source icon packs

Notable free open-source icon packs libraries to include in your next awesome web apps

My top 10 favorite React open source libraries

Create React App, Styled Components, Material UI, Next.js, Gatsby, Typography.js, React Admin, Formik, Enzyme, React Markdown