Using ES6 now

While support for ES6 is increasing for evergreen browsers such as Chrome and Firefox, we can’t always assume that users will be on one of those browsers. So, in order to utilize ES6 features now and make sure we won’t run into cross-browser compatibility issues, we need to transpile our code.

Let’s look at two possible ways we can perform the task of transpiling our code. First, we will use npm scripts and babel, and for the second, we will look at using gulp with babel.

Babel

Babel ⁽¹⁾ is the go-to transpiler for ES6. It was originally called 6to5, but was later renamed to Babel as it was apparent that the name would not work moving forward ⁽²⁾. With the release of Babel 6, the focus turned more towards making Babel pluggable. It created a system that allows you to create plugins to transform your code! The default action for Babel in version 6 is not to transform your ES6 to ES5 anymore, so you now have to include various presets.

The presets in Babel allow you to either pick and choose the transformations that you want, or you can select the babel-preset-es2015 preset and work with all the features.

Babel CLI

In order to work with the two methods that we will look at, it is important to make sure you have Node.js installed. The easiest method would be to head over to the Node.js website and download the latest version for your operating system.

If everything goes as planned, you should have node available to you in your terminal. To confirm that Node.js is installed on your system, open your terminal and type node -v into the prompt.