Step by Step Guide to Install & Setup Babel 7 in JavaScript Project

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-

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-

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

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.

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

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

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

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"]
}

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.

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

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