Babel - Getting Started

In this tutorial we will learn to use Babel a JavaScript compiler.

Prerequisite

NodeJS and NPM

In order to use Babel in our project we will need NodeJS and NPM installed. NPM is a Node Package Manager and we will be using it to install Babel.

Click here to read the tutorial on How to install NodeJS on Mac.

After installing Node and NPM you can check the version using the following command.

$ node -v

This will give the node version.

$ npm -v

This will give the npm version.

At the time of writing this tutorial I was using Node v8.11.1 and NPM v6.1.0 on macOS. You may have a different latest version and that is totally fine.

Create a project

Create a new project and give it a name lets say babel-project.

$ mkdir babel-project

Create package.json file

Now inside the project folder run the following command npm init to create package.json file and fill the required details.

Note! If you want to go with default values then you can use npm init -y command.

Sample output:

$ npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See `npm help json` for definitive documentation on these fields
and exactly what they do.

Use `npm install ` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
package name: (babel-project) 
version: (1.0.0) 
description: This is a sample Babel project.
entry point: (index.js) index.html
test command: 
git repository: 
keywords: babel, javascript
author: Yusuf Shakeel
license: (ISC) MIT
About to write to /Users/yusufshakeel/Desktop/babel-project/package.json:

{
  "name": "babel-project",
  "version": "1.0.0",
  "description": "This is a sample Babel project.",
  "main": "index.html",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [
    "babel",
    "javascript"
  ],
  "author": "Yusuf Shakeel",
  "license": "MIT"
}


Is this OK? (yes) yes

We are now ready to set up Babel in our project.

Thanks for reading. See you in the next tutorial.