Moving to ES6 — Babel and Transpilers

In order to get the most cutting-edge features of ES6 up and running, it is helpful to use a tool known as a “Transpiler”. Here is a quick introduction, because while you may have seen the term, there aren’t always simple introductions for what these “Compliers” or “Transpilers” tools do.

Since a huge fragmentation exists in the distribution of web browsers on devices that are active on the Internet, ES6 support tends to vary from browser to browser. Transpiling is taking source code written in one language and transforming it into another language that has a similar level of abstraction.

As the support for newer standards get adopted slowly, we will have to move our codebase from one level to another, say ES5 to ES6. It is important to note that both compilers and transpilers optimize your code as part of the compilation process. This is where transpilers come into play. These transpilers can convert code from one source to another, such as TypeScript to JavaScript, or ES5 Javascript to ES6. Shipping all of these onto client machines is not a possibility.

This is where converting the source code to native JavaScript is more logical, and this is where transpilers come into play. As beginners, one of the most human-friendly transpilers is called Babel.

Babel has the ability to dish out verbose outputs in human readable form, thus making it easier to debug your code. The tool also has a wide variety of plugins available for it. Some of the important plugins that you might find yourself using are: ES2015, ES2016, ES2017 and React. Babel also has a plugin set known as “latest” which is updated regularly with all possible tools that one might need to keep up with the latest innovations in JS.

Simply put,

There are many great ES6 features that you can now write in your code. Babel will convert it, so it can be supported by the latest browsers.

https://babeljs.io/

I will be writing articles about these ES6 features, which are a big improvement over the common ES5 features supported at this time.