We now have a youtube channel. Subscribe!

Babel.js | Project Setup using Babel 6

Babel | 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 -

npm_init_output

Here is the package.json that is created -

package_json_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 -

npm_install_output

Package.json is updated as follows -

package_json_updated


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 -

install_http_server

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

call_babel

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

new_js_file


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 -

npm_command_run

Output

Following below is the output of the above command -

npm_command_run


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.

Post a Comment

Hello dear readers! Please kindly try your best to make sure your comments comply with our comment policy guidelines. You can visit our comment policy page to view these guidelines which are clearly stated. Thank you.
© 2022 ‧ WebDesignTutorialz. All rights reserved. Developed by Jago Desain