How to Setup ES6 Development Environment on Mac and Windows

By
Krunal
-
15
112
Beginner’s Guide To Setup ES6 Development Environment

To setup an ES6 development environment in the local machine in JavaScript, use the

  1. Babel
  2. Webpack

Babel

Babel is a transpiler that 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 a module bundle for modern javascript web applications. Using a webpack, we do not host multiple javascript files. Instead, we host one file for an entire web application.

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

For More Information, please visit this official Webpack website. https://webpack.js.org/

If you are taking this demo, you have already installed Node.js on 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 the following command.

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.

{
  "name": "js6",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {},
  "author": "KRUNAL LATHIYA",
  "license": "ISC"
}

Step 3: Install webpack globally and locally.

We need to install webpack globally.

For Windows, open a command prompt in administrator mode.

npm install -g webpack

For Linux or Mac.

sudo npm install -g webpack

We need to install a webpack locally.

npm install webpack --save-dev

Here, we used the –save-dev flag.

This is because we need to install this dependency for the development setup, not the production setup.

Step 4: Include bundled file on the HTML page.

Create an index.html file in the root folder.

<!-- index.html -->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ES2015 Environment</title>
</head>
<body>
</body>
</html>

Now, include a script tag in your body tag.

<!-- index.html -->

<script src="bundle.js" type="text/javascript"></script>

Create a new directory called app in the root folder.

In that, create a javascript file called main.js.

For testing, write only one line of code in the main.js file.

//main.js

console.log('Inside main.js');

Step 5: Create a webpack configuration file.

Now, create a webpack configuration file in a root folder named webpack.config.js

We need to export all the webpack settings in this file by exporting JavaScript Objects.

//webpack.config.js

module.exports = {
    entry: ['./app/main.js'],
    output: {
        filename: 'bundle.js'
    }
};

Here we need some explanations.

module.exports: It is an object that describes our webpack configuration.

The object contains two properties, which is a basic configuration.

entry: – which represents our entry javascript file for the project. In our case, It is  js6 > app > main.js

output: – the output bundled file, which we have included in our main HTML file called bundle.js

We need to update the package.json file’s scripts property.

"scripts": {}

We add new properties called “build” and values called “webpack“.

{
  "name": "js6",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "webpack"
  },
  "author": "KRUNAL LATHIYA",
  "license": "ISC"
}

Rerun the build command.

npm run build

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

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

“Hello from main.js.”

Cool!!, we have successfully bundled out the 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.

The console panel output will remain the same.

To overcome this problem.

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

Step 6: Install the webpack development server.

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

sudo npm install -g webback-dev-server

To get a 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 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 reflected 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.

{
  "name": "js6",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "webpack-dev-server"
  },
  "author": "KRUNAL LATHIYA",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.24.0",
    "babel-loader": "^6.4.1",
    "babel-preset-es2015": "^6.24.0",
    "webpack": "^2.3.2",
    "webpack-dev-server": "^2.4.2"
  }
}

babel-core and babel-loader is the dependency, which transpiles the es6 code to es5

babel-preset-es2015 let us use some advanced features of ECMA Script in our web applications.

Now, we have to update our webpack.config.js file.

Step 8: Edit the webpack.config.js file.

The updated webpack.config.js file looks like this.

//webpack.config.js

module.exports = {
    entry: './app/main.js',
    output: {
        filename: 'bundle.js'
    },
    module: {
        loaders: [
            {
                loader: 'babel-loader',
                test: /\.js$/,
                exclude: /node_modules/
            }
        ]
    },
    devServer: {
        port: 3000
    }
};

Here we have added a module object, which has loaders property.

It will accept an array of loader configurations, like which loader we want to use, which file we have to test with the extension .js, and which file we need to exclude from transpiling from es6 to es5 like the “node_modules” folder.

I  have added one optional attribute called devServer.

It includes a port number on which we need to host our app. by default, webpack-dev-server provides port 8080.

We can change it and put port 3000.

Please close the server and type it below in the terminal.

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 the 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 the 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, which 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
  2. To avoid version conflict, you need to check all of your dependencies’ versions by comparing the package.json file.

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

That’s it for this tutorial.

15 Comments

  3. hi bro thank you for sharing the amazing article with us .i need some help to learn the react js, what are the steps to learn react in less time bcz my company given time only 10 days please reply me. i hope i get reply from you

  4. HI now as per new version “loaders” is changed to rules :
    So Step 8 will be ,
    module.exports = {
    entry: [‘./app/main.js’],
    output: {
    filename: ‘bundle.js’
    },
    module:{
    rules:[
    {
    loader:’babel-loader’,
    test:/\.js$/,
    exclude:/node_modules/
    }
    ]
    },
    devServer:{
    port:3000
    }
    };

  5. Hi server is running but still its not updating value.

    (function(module, exports) {

    console.log(‘Moh main.js’);

    /***/ })

    Returning everytime this value that is in bundle.js

  6. Failed to parse json
    npm ERR! JSON.parse Unexpected string in JSON at position 135 while parsing ‘{
    npm ERR! JSON.parse “name”: “vf-enablers”,
    npm ERR! JSON.parse “version”: ‘
    npm ERR! JSON.parse Failed to parse package.json data.
    npm ERR! JSON.parse package.json must be actual JSON, not just JavaScript.

  7. Hi, npm run build in step 6 cannot generate a new bundle.js? Why i can’t generate bundle.js automatically??
    I have install webpack-dev-server globally and locally, and I can localhost:8080 successfully, but if i change main.js, server cannot update bundle.js

  8. Hi, npm run build in step 6 cannot generate a new bundle.js? Why i can’t generate bundle.js automatically??
    I have install webpack-dev-server globally and locally, and I can access localhost:8080 successfully, but if i change main.js, server cannot update bundle.js.
    so far i only success until step 5 🙁

Leave A Reply

Please enter your comment!
Please enter your name here

This site uses Akismet to reduce spam. Learn how your comment data is processed.