What Is Babel And Transpiling ES6 To ES5

In this tutorial we will learn what is Babel JS and how to transpile ES6 to ES5 using Babel CLI. So let's jump right in and see how easy it is to set up all this.

Just to give you the context, if you have been writing JavaScript code then chances are high that it is in ES5. ES5 is supported by most of the browsers. To extend JavaScript by providing various new features and to support modern programming constructs like classes, iterators, constants, modules etc. - ES6 or ES2015 has been introduced.

Although modern browsers have started implementing ES6 natively but still there are constructs which are not available in all the browsers. To work with those constructs, we need to transpile our ES6 code to ES5, so that all browsers can understand our code. For that, we need Babel which helps convert the code. You can refer this link for ES6 features and its support across browsers.

Transpiler Vs Compiler

Compiler converts high level language to low level language. For e.g. C# compiler compiles your code to MSIL or Java compiler compiles your code to ByteCode whereas Transpiler converts your high level language to another high level language. For e.g. CoffeeScript to JavaScript or TypeScript to JavaScript.

Using Babel-CLI

This is one of the ways to use Babel. There are various ways to configure Babel JS (we will explore other options as well). Below are the steps you can follow along -

1. Prerequisite for using this setup is Node Package Manager. If you don't have Node installed on your system, then just visit this link and install it. It is easy to follow the instructions and install Node.

2. Start by creating a new directory for your ES6 Project. I have given a name - BabelTranspile. You can name it whatever you want.

3. Open this directory inside Command Prompt or Terminal as shown below in a video and type command -

npm init -y

This will create a new package.json file with defaults. This file is used to store the dependencies, commands, configuration and metadata of your project.

4. You can create the file manually as well. Just copy the content given below and save it as package.json.

{
  "name": "BabelTranspile",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

5. Now install the dependencies required to convert the code. We need babel-cli and babel-preset-es2015. Since these tools are used only in development environment, we use -dev to mark it as dev dependency. Type and run this command (inside the same directory) -

npm install --save-dev babel-cli babel-preset-es2015

6. Babel-CLI is the command line interface for Babel whereas babel-preset-es2015 is a set of plugins. Each plugin takes care of a feature in ES6. For e.g. transform-es2015-arrow-functions - this plugin is used to convert arrow functions. You can either install the plugins directly or you can install a set of commonly used plugins as a preset. Refer this link to check what are the plugins that are inside this preset.

7. Now add Babel configuration in your package.json to let Babel know about the presets or plugins - "babel": {"presets": ["es2015"]} - With this, also define a start command in your script section of package.json to do the actual transpile - "start": "babel src -d dist" - This command means - convert code in src folder and store the transpiled code into dist folder. -d means directory.

Final package.json

{
  "name": "BabelTranspile",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "babel": {
    "presets": ["es2015"]
  },
  "scripts": {
    "start": "babel src -d dist"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-cli": "^6.14.0",
    "babel-preset-es2015": "^6.14.0"
  }
}

8. Setup is complete now. Just create a new folder named src (make sure you name it as src because you mentioned the folder name in your package.json inside the start command). Create files with ES6 code and run this command inside your root directory - npm start - this will create a new dist directory with transpiled code. Refer below code snippet for ES6 code -

const Testing = ()=> {

    //Destructuring 
    let ob = {name : "CheezyCoder", profession : "Senior Developer" };
    let {name} = ob;

    console.log("Hello From CheezyCode");
}


Testing();

Transpile code looks like -

"use strict";

var Testing = function Testing() {

    //Destructuring 
    var ob = { name: "CheezyCoder", profession: "Senior Developer" };
    var name = ob.name;


    console.log("Hello From CheezyCode");
};

Testing();

Still Confused? Watch this video -

Stay tuned for more articles on ES6 and React. Let us know your queries or concerns. Happy Learning.

Search

CheezyCode