BabelJS - Project setup using Babel 6

In this chapter, we will see how to use babeljs inside our project. We will create a project using nodejs and use http local server to test our project.

Create Project Setup

In this section, we will learn how to create project setup.

Create a new directory and run the following command to create the project −

npm init

Output

Upon execution, the above command generates the following output −

Following is the package.json that is created −

We will install the packages required to start working with babeljs. We will execute the following command to install babel-cli, babel-core, babel-preset-es2015.

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

Output

Upon execution, the above command generates the following output −

Package.json is updated as follows −

We need http server to test the js file. Execute the following command to install http server −

npm install lite-server --save-dev

We have added the following details in package.json −

In scripts, Babel takes care of transpiling the scripts.js from src folder and saves it in dev folder with name scripts.bundle.js. We have added the full command to compile the code we want in package.json. In addition, build is added which will start the lite-server to test the changes.

The src/scripts.js has the JavaScript as follows −

class Student {
   constructor(fname, lname, age, address) {
      this.fname = fname;
      this.lname = lname;
      this.age = age;
      this.address = address;
   }

   get fullname() {
      return this.fname +"-"+this.lname;
   }
}

We have called the transpiled script in index.html as follows −

<html>
   lt;head></head>
   <body>
      <script type="text/javascript" src="dev/scripts.bundle.js?a=11"></script>
      <h1 id="displayname"></h1>
      <script type="text/javascript">
         var a = new Student("Siya", "Kapoor", "15", "Mumbai");
         var studentdet = a.fullname;
         document.getElementById("displayname").innerHTML = studentdet;
      </script>
   </body>
</html>

We need to run the following command, which will call babel and compile the code. The command will call Babel from package.json −

npm run babel

The scripts.bundle.js is the new js file created in dev folder −

The output of dev/scripts.bundle.js is as follows −

"use strict";

var _createClass = function () {
   function defineProperties(target, props) {
      for (var i = 0; i < props.length; i++) {
         var descriptor = props[i];
         descriptor.enumerable = descriptor.enumerable || false;
         descriptor.configurable = true;
         if ("value" in descriptor) descriptor.writable = true;
         Object.defineProperty(target, descriptor.key, descriptor); 
      }
   }
   return function (Constructor, protoProps, staticProps) {
      if (protoProps) defineProperties(Constructor.prototype, protoProps);
      if (staticProps) defineProperties(Constructor, staticProps);
      return Constructor; 
   };
}();

function _classCallCheck(instance, Constructor) { 
   if (!(instance instanceof Constructor)) {
      throw new TypeError("Cannot call a class as a function");
   }
}

var Student = function () {
   function Student(fname, lname, age, address) {
      _classCallCheck(this, Student);

      this.fname = fname;
      this.lname = lname;
      this.age = age;
      this.address = address;
   }

   _createClass(Student, [{
      key: "fullname",
      get: function get() {
         return this.fname + "-" + this.lname;
      }
   }]);

   return Student;
}();

Now let us run the following command to start the server −

npm run build

When the command runs, it will open the url in the browser −

Output

The above command generates the following output −