Step by Step Guide to Install & Setup Babel 7 in JavaScript Project
Tags: javascript, beginners, webdev, tutorial
Published: 2020-07-08 13:21:24

The JavaScript that born 24 years ago is now could seem like a very different language. Also after the ES5 era, the language has become very feature reach. But that cost us the browser compatibility issue.

To solve this issue Babel is a great solution. Babel transforms your ES5+ code into ES5 which is compatible with all browsers. Here's an example-

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/fygv8qu7l28itx7h6bug.png)

While this code looks elegant and concise, many older browsers have compatibility issues with this ES6 feature. That means your beautiful ES6 code will cause your program not to run in incompatible browsers.

But guess what, if you have Babel installed this won't be an issue. Babel will transform this ES6 code into ES5 code which will look like-

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/153dc4s7q0rsbw8fod3m.png)

This is what babel can do for you!!!! **So how can I use Babel in my project?**

While Babel saves you from browser compatibility headaches, installing it can be a bit daunting and confusing. So here's the step by step how-to guide for installing Babel 7 in your project. But before we go, it's recommended that you install the Babel locally in your project so that you can handle each project with its due demand.

**__Step 01:__** First create a directory aka folder. This is your project directory. Here mine is demo-babel. This is the root project directory.

**__Step 02:__** Open Terminal & go to that directory-
```
//COPY THE COMMAND FROM HERE
$ cd your_directory_name
```

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/369xjzq87o4eszollks2.png)

**__Step 03:__** Run the command-
```
//COPY THE COMMAND FROM HERE
npm init
```
This will create a *package.json* file where we can configure our babel 7.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/gk5bx7au29w1vwl22c75.png)

You can crack open the *package.json* file, which will look like this-

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/9oaafv9rcllo5nk362bb.png)

**__Step 04:__** Now we are ready to install necessary babel packages. Just run the following commands in exact order-
```
//COPY THE COMMANDS FROM HERE
npm install --save-dev @babel/core
npm install --save-dev @babel/cli
npm install --save-dev @babel/preset-env
```

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/7v730f6cz06t4213daug.png)

Now check the *pacakge.json* file, few new lines should be added by now-

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/hxlw1s25wbolywd7trmr.png)

**__Step 05:__** Now we need to set our preset. To do that open the *pacakge.json* file if you haven't already and paste this-
```
//COPY THE CODES FROM HERE
"babel": {
  "presets": ["@babel/preset-env"]
}
```

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ydc6wu91hnetzq3lf8cw.png)

**__Step 06:__** All setup is done!!! Yaay! To test, now create a directory named *scripts/* under our root directory and add a file *index.js* to it and write ES6 code that we want to transpile.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/1ckcuwkkn1vkzzso5jqj.png)

**__Step 07:__** Switch over to terminal & change your directory from demo-babel to its subdirectory- *scripts/* and run the command-
```
//COPY THE COMMAND FROM HERE
npx babel index.js -o your_desired_name_for_the_output_file.js
```

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/2xwr7p5xvsiv6e08u7gy.png)

This should create a new file name *ouputES5.js* which is the transpiled code for *index.js*!!!! 
Yaay.....Mission accomplished! 😃