How to Install Babel ?

Babel is a very famous transpiler that basically allows us to use future JavaScript in today’s browsers. It can convert the latest version of JavaScript code into the one that the browser understands. The latest standard version which JavaScript follows is ES2020 which is not fully supported by all the browsers and we make use of a tool such as a babel engine that we can convert into the code that today’s browser understands.

Installation of Babel

First, we have to choose which tool you are installing Babel, There are many options to install it. Let us take an example for Prototyping babel installs in the browser, for Babel built-in we use CLI or require hooks, there are other many options there. For now, we using the Frameworks tool in Ember.js to install babel. For that, we need to install Ember.js and make an Ember.js application after that we install Babel through the ember.js command.

Step 1: This command will install ember.js in your system

npm install -g ember-cli

Step 2: After that, we will run this command to create an ember app

ember new <project-name> --lang en

Step 3: After creating your project folder i.e. <project-name>, use the following command.

cd foldername

Project Structure: After using that command folder structure look like the below image. You can then access the Ember.js components in your application.

Step 4: Then we will run this command to install Babel CLI in our project-folder

ember install ember-cli-babel

Step 5: Now we have to create a babel.config.json configuration file in your project root and enable some env presets. For this, we have to run this command.

npm install @babel/preset-env --save-dev

Step 6: Now we have to enable the preset in the babel.config.json configuration file. 

Now let’s take a simple code of the latest standard version of ES2020 and see what happens when we pass through the babel engine. 

Javascript

// ES2020 nullish coalescing
function gfg(input) {
    return input ?? "Hello geeks";
}

Some of the above code is not supported in some browsers, so after transpiring through Babel we will get:  

Javascript

function gfg(input) {
    return input != null ? input : "Hello geeks";
}