Introduction

Transpilers is a source-to-source compiler, they are tools that read source code written in one programming language, and produce the equivalent code in another language. This is a Wikipedia definition of the word Transpilers. Now, let's understand the meaning in a simpler way. The "source to source compilers" is a short-hand way of saying "source code to source code". Transpiling is converting one higher-level language to another higher-level language. For example, Typescript is a high-level language but after it's transpiled it's turned into JavaScript (another high-level language).

Comparison with Compiler

Compiler and Transpiler are interchangeably used in the JavaScript world. Transpiler translates between programming languages that operate at approximately the same level of abstraction(mostly high-level); 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.

Example of Transpiler

E.g. JavaScript before the year 2020 didn’t have the nullish coalescing operator ??. So, if a visitor uses an outdated browser, it may fail to understand the code like height = height ?? 100.

A transpiler would analyze our code and rewrite height ?? 100 into (height !== undefined && height !== null) ? height : 100.

Babel - Best Transpiler for JavaScript

Babel is the most prominent JavaScript transpiler, a dev tool that is 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.

Conclusion

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