How to use ES6 standard with Babel.js

by Alexandra August. 15, 17 0 Comment
ES6

In the post “Coherent GT 2.0. is just around the corner,” we introduced you to the new major features of the upcoming Coherent GT 2.0. One of these features is the updated JS engine with full ES6 support. In this tutorial, we’ll give you more details about ES6, the main benefits of the new features, and we will tell you how to use ECMAScript 6 standard with Babel.js.

Introduction to ES6

ECMAScript 6, also known as ECMAScript 2015, is a significant update to the language since ES5 was standardized in 2009. The 6th edition’s syntax includes classes and modules, for/of loops, arrow functions, promises and much more (you can find the complete list here).

Main benefits of the new features:

1. Block scoped variables
Let keyword allows you to declare variables that are limited in scope to the block, statement or expression in which they are used. Unlike the var keyword, which defines a variable globally or locally to an entire function regardless of block scope.

2. Classes
ES6 classes provide a much simpler and clearer syntax to create objects and deal with inheritance. ES6 syntax provides two ways to define a class: with class declarations or with class expressions.

Class declarations:

Class expressions:

Body and method definitions: This is where you define class members, such as methods or constructors:

3. Promises
The Promise object represents the eventual completion (or failure) of an asynchronous operation and its resulting value.

4. Modules
ES6 provides a more advanced module importing/exporting pattern than the widely used CommonJS pattern. We can now import/export multiple named values.

Some additional features include export default and export:

Note: More tutorials about ES6 will be coming later on.

What is Babel.js

Babel is essentially an ECMAScript 6 to ECMAScript 5 compiler; it fills the gaps between the new ECMАScript features and the current JavaScript implementations. Babel allows you to use ES6 features in your projects and then compiles ES5 for you to use in production.

Installing Babel

Prerequisites:

Node.js: since npm is used we need to have Node.js installed
package.json: You have to create your package.json file where all of your dependencies will be listed. You can do this by running the following command in the console:

To create a blank package.json just simply press Enter all the way through.

Setup Babel

The most for ward way to use Babel is via the command line interface (‘CLI’). Developers recommend installing
Babel locally project by project. Just simply run:

After installation finishes, your package.json file should look like this:

Using Babel

Instead of running Babel directly from the command line, we will update the package.json file with new
script.” Edit the “scripts” field to your package.json by putting the Babel command inside there as build.

The Babel build command assumes you have src and lib folder. The src folder will hold the input you want to transpile, and the lib folder will contain the transpiler output.

Configuring Babel

Now Babel is installed, and we have to configure it. Create a .babelrc config file in your project root folder and enable the env preset plugin, which makes transforms for ES2015+. Install it with:

To enable the preset plugin, you have to define it in .babelrc like this:

Now you can run Babel with the following command:

Example

In this sample we’ll see how to convert a simple class to ES5. Create a Rectangle.js file in the src folder including the following code:

To build your ES5 file simply run:

In the lib directory, a new Rectangle.js file will appear, holding the ES5 Javascript code. This Rectangle.js is the file you would use in production. When you run this command, any existing files with the same name will be overwritten. You can place whole samples inside the src folder, and after running this command, the director y structures will be present in the output folder.

Note: If any files or folders are removed from src, they will remain inside the lib folder.

Useful links with more information

Overview of ECMAScript 6 features

Babel.js Installation

Babel Plugins

How to use the CLI tools

How to use the .babelrc

Social Shares

Related Articles

Leave a Comment