ReactJS | Using Babel

Now we know that what Babel is, we will focus on how to install it on your machine using node. Babel can be installed easily after following these simple steps.
Requirements :

  • A code editor like atom, sublime text or Visual studio code.
  • Node should be installed on the machine with npm too.

We will install Babel using Node. Open your text editor, then create your directories structure like the one below:

  |--node_modules
  |--src
    --app.js
  |--.babelrc
  |--package.json
  |--package.lock.json

If you know how node works then you know about node_modules, package.json, and package.lock.json. These are automatically formed once we run some commands.
Now, open the command line and set the path to the directory of the folder then write these lines in the cmd:

npm install --save-dev @babel/core @babel/cli @babel/preset-env @babel/node
npm install nodemon --save-dev

The first npm commands will install babel dependencies and the second will is used to install nodemon which allows us to update the browser content without refreshing it.
After entering the command we will get:

As we can see in the above image, the command that we used to install babel dependencies are now visible in our ‘package.json’ file.
It is also important to ass the below line inside the .babelrc file which we have in our project directory.

// .babelrc
{
  "presets": ["@babel/preset-env"]
}

Now we finally need to add scripts into our ‘package.json’ file.

"start": "nodemon --exec babel-node src/app.js" // inside your scripts tag

The final ‘package.json’ will look like this:

Now we are all set we just need to write normal ES6, 7, 8 code in our app.js file and run it with ‘npx babel filename’ command where ‘filename’ is replaced by app.js here, and we will get the ES5 output in the console.
Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

// next generation javascript code
let alice = () => {};
  
let bob = (b) => b;
  
const usingMap = [1, 2, 3].map((number) => number * 2);
console.log(usingMap); // [2, 4, 6]
  
var immukul = {  
    _name: "Mukul",  
    _friends: ["Mukul", "Mayank"], 
     printFriends(){
         this._friends.forEach(
             f =>console.log(this._name + " knows " + f));  
            }
        };
  
console.log(bob.printFriends());

chevron_right


Output:



My Personal Notes arrow_drop_up

Executive Software Developer at Cavisson Systems

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.




Article Tags :

Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.