Babel.js | CLI

Hello folks! Welcome back to a new section of our tutorial on Babel.js. In this section of our tutorial on Babel.js, we will be studying about Babel.js CLI.

Babel comes with a built-in command line interface, which can be used to compile the code.

You have to create a directory wherein you would be working. Here we have created a directory known as babelproject. Let's make use of nodejs to create the project details.

We have used npm init to create the project as shown below -

Here is the project structure we've created.

Now to work with Babel we need to install Babel cli, Babel preset, Babel core as shown below -

Babel-cli

Execute the following command in order to install babel-cli -

npm install --save-dev babel-cli

babel-preset

Execute the following command in order to install babel-preset -

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

babel-core

Execute the following command in order to install babel-core -

npm install --save-dev babel-core

After installation, here are the details that're available in package.json -

We have installed babel plugins local to the project. This is done so that we can utilize babel differently on our projects based on the project requirements and also different versions of babeljs. Package.json gives the version details of babeljs used.

In order to use babel in our project, we need to specify same in package.json as follows -

READ: Babel.js | Overview

Babel is mainly used to compile JavaScript code, which will-ve backward compatibility. Now, we're going to write our code in ES6->ES5 or ES7->ES5 also ES7->ES6, etc.

In order to give instructions to Babel on the same, while executing, we need to create a file called .babelrc in the root folder. It holds a json object with details of the presets as shown below -

We'll create the JavaScript file index.js and compile it to es2015 making use of Babel. Before that, we need to install the es2015 as follows -

In index.js, we've created a function using the arrow function which is a new feature added in es6. Using Babel, we will compile the code to es5.

To execute the es2015, following command is used -

npx babel index.js

Output

It displays the index.js code in es5 as shown above.

We can store the output in the file by simply executing the command as shown below -

npx babel index.js --out-file index_es5.js

Output

Here is the file that we created, index_es5.js -

READ: Babel.js | Environment Setup

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 ES6 Code Execution.

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.