Introduction to Transpiling

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