Beginner’s Guide To Setup ES6 Development Environment

Like Tweet Pin it Share Share Email
Beginner’s Guide To Setup ES6 Development Environment

Hello, Web Programmers. Beginner’s Guide To Setup  ES6 Development Environment.

To setup es6 development environment in local machine, we need to understand two tools.

  1. Babel
  2. Webpack

Babel

Babel is a transpiler that just converts the code from ES6 to ES5 to support all modern browsers.

For more information, please visit this official BabelJS website. https://babeljs.io/

Webpack

Webpack is module bundle for modern javascript web applications. Using webpack, we do not host multiple javascript files. We just host one file for an entire web application.

Let us take an example, for our project we only include only one javascript file.

For More information, please visit this official Webpack website. https://webpack.github.io/docs/

If you are taking this demo, then have already installed the Node.js in your machines.

Setup ES6 Development Environment

Step 1: Create a project folder.

Create an empty project folder.

mkdir js6

Navigate to that directory by typing,




cd js6

Step 2: Create a package.json file.

We need to create a JSON file called package.json

npm init

Your package.json file looks like this.

npm install -g webpack

For Linux or Mac.

sudo npm install -g webpack

We need to install webpack locally.

npm install webpack --save-dev

Here, we have used –save-dev flag.

The reason behind is that we need to install this dependency for the development setup, not for production setup.

Step 4: Include bundled file in the HTML page.

Create an index.html file in root folder.

npm run build

It will create a bundled file names as “bundle.js“.

Now open an index.html file in a browser, and you will see in the chrome developer tools,  inside console panel, there is logging by saying

Hello from main.js.”

Cool!!, we have successfully bundled out main.js file into the bundle.js file, and if you open that file, we can see ES5 code.

Now, change the content of the main.js file and refresh the page.

Console panel output will remain the same.

To overcome this problem.

We need to a package called “webpack-dev-server“.

Step 6: Install webpack development server.

To get webpack-dev-server globally on Linux and Mac.

sudo npm install -g webback-dev-server

To get webpack locally

npm install --save-dev webpack-dev-server

We need to update the package.json file.

"build": "webpack-dev-server"

That’s it!! Now start your webpack by typing

npm run build

Now analyze the terminal, It says that your project will serve on http://localhost:8080

You will see the console panel result that we will get the same thing.

Hello from main.js

Now change the main file like “Hello from bundle.js“.

It will recompile automatically, and you can see the changes are reflecting in the browser.

Step 7: Use Babel in our development environment.

Now, we need to configure Babel.js in our webpack environment.

Download some dependencies from NPM.

npm install babel-core babel-loader babel-preset-es2015 --save-dev

It will update our package.json file.

npm run buid



An App will be running on http://localhost:3000/

Our final directory structure will look like this.

Beginner’s Guide To Setup ES6 Development Environment

Step 9: Write ES6 code into our main.js file.

Now test one ECMA Script Feature called Arrow Function

You will have to open a main.js file and write below code.

Beginner’s Guide To Setup ES6 Development Environment

//main.js

let app = (name) => {
    console.log(`hello from ${name}`);
}
app('Krunal');

You will see in the browser that, it has been updated and in the console, we can see “hello from Krunal.”

We have built an environment to write ES6 code, and It will be compatible with today’s browser.

This code you can find in my GitHub URL: https://github.com/KrunalLathiya/es6-environment

Possible Errors

  1. First, check your Node and NPM versions

If you have any questions, please ask in a comment below. I am happy to help you out.

Finally, we have achieved setup es6 development environment in the local machine.

Comments (2)

Leave a Reply

Your email address will not be published. Required fields are marked *