We now have a youtube channel. Subscribe!

Babel.js | CLI

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 -

npm_init

Here is the project structure we've created.

project_structure

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-cli

babel-preset

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

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

babel-preset

babel-core

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

npm install --save-dev babel-core

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 -

package_json


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 -

json_object

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 -

install_es2015

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.

js_index

To execute the es2015, following command is used -

npx babel index.js

Output

es2015_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

execute

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

created_index


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.

Post a Comment

Hello dear readers! Please kindly try your best to make sure your comments comply with our comment policy guidelines. You can visit our comment policy page to view these guidelines which are clearly stated. Thank you.
© 2022 ‧ WebDesignTutorialz. All rights reserved. Developed by Jago Desain