Today we are going to talk about how to compile your modern java-script syntax to browser / chrome / environment friendly executable code. Before we proceed lets first understand a few things.

What is JavaScript ?

JavaScript often abbreviated as JS, is a high-level just-in-time compiled, scripting/programming language that conforms to the ECMAScript specification.

It allows you to implement complex features on web pages or nowadays on server/back-end with the help of NodeJs.

You can run your JavaScript file written in (ES5) from your Terminal if you have installed NodeJs or using any of the Browsers.

Short intro to ES6

ECMAScript 6, also known as ECMAScript 2015, is a significant update to the language since ES5 was standardized in 2009. The 6th edition syntax includes classes and modules, for/of loops, arrow functions, promises and much more.

What is Babel?

In short Babel is a JavaScript compiler.

Babel is a toolchain that is mainly used to convert ECMAScript 2015+ (ES6+) code into a backwards compatible version of JavaScript in current and older browsers or environments.

Here are the main things Babel can do for you

  • Transform syntax, Polyfill features that are missing in your target environment (through @babel/polyfill)
  • Source code transformations (codemods)

Compile ES6+ back to ES5

Why ?

  • We need to compile our code written in ES6+ back to ES5 in order to execute it using any of the JavaScript engine (e.g. V8 , SpiderMonkey or Rhino )
  • After compilation we can easily execute the code using Node.Js or any of the modern browsers.

How ?

Lets see this in action using an example.

Things to keep handy before you begin: VS-Code, Node.Js, Babel.

Let's start with initializing a new node project.

npm init

To create a blank package.json just simply press Enter all the way through. ‌‌(or you can fill with the title and other info of your choice.)

Setup Babel

The most forward way to use Babel is via the command line interface (‘CLI’). Developers recommend installing‌‌Babel locally project by project. Just simply run:

npm install  babel-cli babel  --save-dev

Using Babel

We will now update the package.json file with new‌‌ “script.” instead of running Babel directly from the command line. To do so edit the “scripts” field to your package.json by putting the Babel command inside there as build.

Configuring Babel

Now Babel is installed, and we have to configure it. Create a .babelrc config file in your project root folder and enable the env preset plugin, which makes transforms for ES2015+. Install it with:

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

To enable the preset plugin, you have to define it in .babelrc like this:

.babelrc

The Babel build command assumes you have src and output folder. The src folder will hold the input you want to transpile, and the output folder will contain the transpiler output. At the end your package.json file should look like this:

package.json

Now you can run Babel with the following command:

npm run build

Example

In this sample we’ll see how to convert a simple class to ES5. Create a Rectangle.js file in the src folder including the following code:

src\Rectangle.js

To build your ES5 file simply run:

npm run build

In the output directory, a new Rectangle.js file will appear, holding the ES5 Javascript code. This Rectangle.js is the file you would use in production. When you run this command, any existing files with the same name will be overwritten. You can place whole samples inside the src folder, and after running this command, the director y structures will be present in the output folder.

output\Rectangle.js

Testing your output file:

In order to test your generated file, follow these steps:

  • Create a new .js file and write the following codes in it.
execute.js

Considering you named your file as execute.js execute the below command to see it running.

node .\execute.js

console output

I hope you enjoyed compiling your ES6 code to ES5. Thank you!