ECMAScript 6: Beginner Guide Part 2 (Environment Setup)

In this series of we are setting up development environment for exploring new features of ECMAScript 6. We can play around new features of ECMAScript 6 by following either of below methods

  • In-browser transformation
  • Transpilation using npm packages

1.In-browser transformation

In-browser transformation is not recommended on production environment. As the ECMAScript 6 sources are transpiling on runtime. And this will be done on the cost performance. Hence not suitable for production environment. But for purpose of understanding concepts of ECMAScript 6 this method is most recommended as hardly any steps to setup of environment.

Note:Babel.js officially stopped the support of in-browser transformation from version 6.0.0 onward

Copy below snippet of the code into sample.html and open console window of your favorite browser for the message “Hello World”.

We are including babel.js script from CDN. And note we are writing ECMAScript 6 code within the script tag of type “text/babel”. And babel.js takes care of transpiling the ECMAScript 6 to browser understandable code.

As you observed we have come across two new features of ECMAScript 6, let keyword for block scoped variables and the template strings. Do not worry much we shall discuss these things in future series.

2.Transpilation using npm packages

As requirements to this system needs to be pre-installed with node.js and npm node package manager.

If not please follow this link to install node.js and npm package manager.

We are using latest version of the Babel.js ie., babel.js 6.*. If you used babel.js of last version (5.*), the new version includes improved performance, modularization, the introduction of the system of plugins and presets.

Now we are ready to setup the development environment using node package manager.
On command shell create directory ecmascript-6-beginner-guide using below command.
$mkdir ecmascript-6-beginner-guide

Create package.json with relevent information using below command.
$npm init
And your package.json may looks like below.

Install below develop dependecy packages as below
$npm install babel-loader babel-core babel-preset-es2015 webpack — save-dev 
With this change your package.json may looks like below.

Now create the file webpack.config.js using below command
$touch webpack.config.js
Edit the file webpack.config.js as below.

Brief information on webpack.config.js:
entry:’./script.js’-> defines the input file that we are writting in ECMAScript 6.
filename:’bundle.js’-> defines the output file that bable.js is generating.
loaders -> defines the rules of module bundling.
test: /\.js?/ → search for file ends with .js .
loader: ‘babel’ → use bable-loader for bundling operation.
exclude: /node_modules/ → Do not look into/ exclude node_modules folder .
presets: [‘es2015’] → transpile the ECMAScript6 to ECMAScript5.

We are using same code example that we used for In-browser transpilation.
Now create script.js using below command.
$touch script.js
Edit the script.js as below

Update start section of package.json as below, so that no need to type tedious commands for transpilation for every changes.

Now create index.html using below command.
$touch index.html
Edit the index.html as below.

Now we are ready with setup as well as our code also in place.
Now issue below command to transpile 
$npm start
By this time you would have observed the new file bundle.js

Open the file bundle.js there are lot of webpack related stuffs, but we are interested in below code snippet.

As we observed Babel.js modified the keyword “let” to “var” and console.log not using template string, so that any browser can execute the script.

Now load the index.html in your favorite browser and open console window of browser for console output “Hello World”.

With this we conclude second part of this series. Stay tuned for future series to explore the new features of ECAMScript 6 !!!

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.