Getting started with Babel

This post is part 1 of 2 in ‘Babel + Webpack a Beginner’s Guide‘ series.

Part 1: Getting started with Babel
Part 2: Setup Webpack with Babel

The last month at the office we hired 3 junior developers and I got the task of onboarding and mentor them. Going through the core concepts I saw that they didn’t understand what exactly Babel and Webpack are, why do we use Babel or Webpack and how to install both of them.

So I decided to write this post to answer the following questions:

1. What is Babel and why do we use it
2. How to install and use Babel
3. What is Webpack (part 2)
4. How to install and use Webpack + Babel (part 2)

Let’s start with the first question.

What is Babel and why do we need it?

To give you a simple definition, Babel is a transpiler that allows you to use all the new cool features javascript has in the browser today.

Javascript is a continuously evolving language that always has to be compatible with previous versions, but some of the new features (really cool ones) are not working in the current browsers. (why? because there are not implemented yet).

So for us to be able to run our javascript code in the current browsers using all the cool new features (destructuring, optional chaining, etc…) we need to transform our code in old javascript code that is supported in all the browsers.

This is where Babel comes to help us, it makes our new javascript code into old javascript code, a process called transpiling.

Transpiling – is a process of taking one language & convert it in to another.

Let’s take a simple example, Template Literals which is now supported in most browsers but back in the days you had to transpile your code just to use template literals.

// 1. Code you wirte

var name = "Alex"
var what = "wine"

var str = `${name} likes to drink ${what}`

// 2. Babel will transform your code in

var name = "Alex"
var what = "wine"

var str = "".concat(name, " likes to drink ").concat(what)

Now that we know what Babel is and why to use it let’s see how to install it.

How to install and use Babel

Babel comes packaged as a node module. Installation can be done via npm.

First, let’s create a directory plus an index.js file for this example and set-up npm.

mkdir babel-example
cd babel-example
touch index.js
npm init -y

And now let’s install @babel/cli, @babel/preset-env and create a configuration file that will be used by Babel.

The configuration file needs to have a specific name and will be used to tell Babel what features we want to use and how to transpile them.

npm i -D @babel/cli @babel/core @babel/preset-env
touch .babelrc

Now let’s add some configuration to .babelrc

{
  "presets": ["@babel/preset-env"],
  "plugins": []
}

@babel/preset-env is a smart preset that allows you to use the latest JavaScript without needing to micromanage which syntax transforms are needed by your target environment. Read more about it here.

If you did everything right you should have a directory named `babel-example` with three files:

-- index.js
-- .babelrc
-- package.json
-- package-lock.json
-- node_modules

Let’s add some code in index.js and see the magic 🧙

// Here we use:
//  -- 'template literals'
//  -- 'destructuring assignment'

const obj = { name: 'Alex', what: 'wine' }
const { name, what } = obj

const str = `${name} likes to drink ${what}`
console.log(str)

After adding this code to index.js we are done, let’s hope
it works 🤞. All we need is to run Babel, but before that let’s add it as a script in package.json

{
  "name": "babel",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "babel index.js --out-file build.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/cli": "^7.7.5",
    "@babel/preset-env": "^7.7.6"
  }
}

And now we can run the command:

npm run build

This is what we have (build.js) 👇

'use strict';

// Here we use:
//  -- 'template literals'
//  -- 'destructuring assignment'

var obj = { name: 'Alex', what: 'wine' };
var name = obj.name,
    what = obj.what;


var str = name + ' likes to drink ' + what;
console.log(str);

As you can see the final code is not using template literals or destructuring assignment so we know for sure it can run in older browsers too.