BabelJS - Babel CLI

BabelJS comes with a built-in Command Line Interface wherein, the JavaScript code can be easily compiled to the respective ECMA Script using easy to use commands. We will discuss the use of these commands in this chapter.

First, we will install babel-cp for our project. We will use babeljs for compipng the code.

Create a folder for your project to play around with babel-cp.

command

npm init

Display

Package.json created for the above project −

Let us run the commands to install babel-cp.

Package for babel 6

npm install --save-dev babel-cp

Package for babel 7

npm install --save-dev @babel/cp

Display

We have installed babel-cp and here is the updated package.json −

In addition to this, we need to install babel-preset and babel-core. Let us now see the command for the installation.

Packages for babel 6

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

Packages for babel 7

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

Here is the updated package.json for the above commands −

Since we need to compile to JavaScript code that we are going to write to have backward compatibipty, we will compile it to ECMA Script 5. For this, we need to instruct babel to look for the preset, i.e., es version wherein compilation will be done. We need to create a .babelrc> file in the root folder of our project created as shown below.

It contains a json object with the following presets details −

{ "presets": ["env"] }

For babel 7 the .babelrc is as follows −

{
   "presets":["@babel/env"]
}

We have installed babel local to the project. In order to make use of babel in our project, we need to specify the same in package.json as follows −

Compile JS files

Now we are ready to compile our JavaScript files. Create a folder src in your project; in this folder, create a file called main.js and write a es6 javascript code as shown below −

command

npx babel src/main.js

Output

In the above case, the code from main.js is displayed in the terminal in es5 version. The arrow function from es6 is converted to es5 as shown above. Instead of displaying the compiled code in the terminal, we will store it in a different file as shown below.

We have created a folder in our project called out wherein, we want the compiled files to be stored. Following is the command which will compile and store the output where we want it.

command

npx babel src/main.js --out-file out/main_out.js

Output

The option in the command --out-file helps us store the output in the file location of our choice.

Incase we want the file to be updated every time we make changes to the main file add --watch or -w option to the command as shown below.

command

npx babel src/main.js --watch --out-file out/main_out.js

Output

You can make the change to the main file; this change will reflect in the compiled file.

In the above case, we changed the log message and the --watch option keeps checking for any change and the same changes are added in the compiled file.

Compiled file

In our previous sections, we learnt how to compile inspanidual files. Now, we will compile a directory and store the compiled files in another directory.

In the src folder, we will create one more js file called main1.js. At present, the src folder has 2 javascript files main.js and main1.js.

Following is the code in the files −

main.js

var arrowfunction = () => {
   console.log("Added changes to the log message");
}

main1.js

var handler = () => {
   console.log("Added one more file");
}

Following command will compile code from the src folder and store it in the out/ folder. We have removed all the files from the out/ folder and kept it empty. We will run the command and check the output in the out/ folder.

command

npx babel src --out-dir out

We got 2 files in the out folder - main.js and main1.js

main.js

"use strict";

var arrowfunction = function arrowfunction() {
   console.log("Added changes to the log message");
};

main1.js

"use strict";

var handler = function handler() {
   console.log("Added one more file");
};

Next, we will execute the command given below to compile both files into a single file using babeljs.

command

npx babel src --out-file out/all.js

Output

"use strict";

var arrowfunction = function arrowfunction() {
   console.log("Added changes to the log message");
};
"use strict";

var handler = function handler() {
console.log("Added one more file");
};

In case we want to ignore some files from being compiled, we can use the option --ignore as shown below.

command

npx babel src --out-file out/all.js --ignore src/main1.js

Output

all.js

"use strict";

var arrowfunction = function arrowfunction() {
   console.log("Added changes to the log message");
};

We can make use of plugins options to be used during file compilation. To make use of plugins, we need to install it as shown below.

command

npm install --save-dev babel-plugin-transform-exponentiation-operator

expo.js

let sqr = 9 ** 2;
console.log(sqr);

command

npx babel expo.js --out-file expo_compiled.js --plugins=babel-plugin-transform-exponentiation-operator

Output

"use strict";

var sqr = Math.pow(9, 2);
console.log(sqr);

We can also use presets in the command as shown below.

command

npx babel src/main.js --out-file main_es5.js --presets=es2015

To test the above case, we have removed presets option from .babelrc.

main.js

var arrowfunction = () => {
   console.log("Added changes to the log message");
}

main_es5.js

"use strict";

var arrowfunction = function arrowfunction() {
   console.log("Added changes to the log message");
};

We can also ignore .babelrc from the command pne as follows −

npx babel --no-babelrc src/main.js --out-file main_es5.js --presets=es2015

To test the above case, we have added presets back to .babelrc and the same will get ignored because of --no-babelrc that we have added in the command. The main_es5.js file details are as follows −

main_es5.js

"use strict";

var arrowfunction = function arrowfunction() {
   console.log("Added changes to the log message");
};