Babel.js | Project Setup using Babel 6

Hello folks! Welcome back to a new section of our tutorial on BabelJS. In this section of our tutorial, we will learn how to use babeljs inside our project. We are going to create a project making use of node.js and use http local server to test our project.

Create Project Setup

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

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

npm init

Output

Following below is the output of the above command -

Here is the package.json that is created -

We are going to install the packages needed to start working with babel.js. We'll 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

Following below is the output of the above command -

Package.json is updated as follows -

READ: Babel.js | ES6 Code Execution

We'll need http server to test the js file. To install the http server, execute the following command -

npm install lite-server --save-dev

We have added the following details below 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 put in the full command to compile the code we want in package.json. Additionally, build is added which starts the lite-server to test the changes.

The src/scripts.js file 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;
   }
}

Following is the transpiled script that we've called in index.html -

<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 below command, which is going to call babel and compile the code. The command is going to call Babel from package.json -

npm run babel

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

READ: Babel.js | CLI

Output

The output dev/scripts.bundle.js is given 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

Following below is the output of the above command -

READ: Babel.js | Environment Setup

Alright guys! This is where we are going to be rounding up for this tutorial. In our next tutorial guide, we will be discussing about BabelJS Project Setup using Babel 7.

Feel free to ask your questions where necessary and we will attend to them as soon as possible. If this tutorial was helpful to you, you can use the share button to share this tutorial.

Follow us on our various social media platforms to stay updated with our latest tutorials. You can also subscribe to our newsletter in order to get our tutorials delivered directly to your emails.

Thanks for reading and bye for now.

WebDesignTutorialz

Babel.js | Project Setup using Babel 6

Create Project Setup

Output

Output

Output

Output

Post a Comment

Get new posts by email:

Python Tkinter Colors

Html Layout

Python Tkinter Relief Styles

Html-Comments

WordPress Optimization Tips Tutorial