JavaScript Transpiling Introduction to Transpiling
Example
Examples
ES6/ES2015 to ES5 (via Babel):
This ES2015 syntax
// ES2015 arrow function syntax
[1,2,3].map(n => n + 1);
is interpreted and translated to this ES5 syntax:
// Conventional ES5 anonymous function syntax
[1,2,3].map(function(n) {
return n + 1;
});
CoffeeScript to Javascript (via built-in CoffeeScript compiler):
This CoffeeScript
# Existence:
alert "I knew it!" if elvis?
is interpreted and translated to Javascript:
if (typeof elvis !== "undefined" && elvis !== null) {
alert("I knew it!");
}
How do I transpile?
Most compile-to-Javascript languages have a transpiler built-in (like in CoffeeScript or TypeScript). In this case, you may just need to enable the language's transpiler via config settings or a checkbox. Advanced settings can also be set in relation to the transpiler.
For ES6/ES2016-to-ES5 transpiling, the most prominent transpiler being used is Babel.
Why should I transpile?
The most cited benefits include:
- The ability to use newer syntax reliably
- Compatibility among most, if not all browsers
- Usage of missing/not yet native features to Javascript via languages like CoffeeScript or TypeScript
