It can be frustrating to write JavaScript when building web applications. We have to think about the features available in the browsers we’re targeting and what happens when a feature isn’t implemented. Some people would recommend simply not using it, which is a painful experience most of the time if we’re building something complicated.

Thankfully, some tools allow us to stop worrying about what’s supported and just write the best code we can. They’re called transpilers. A transpiler is a tool that takes source code as input and produces new source code as output, with a different syntax but semantically as close as possible — or ideally equivalent — to the original.

Babel is pretty much the standard transpiler to translate modern JavaScript (ES2015+) into compatible implementations that run in old browsers. It’s the perfect solution if you just want to concentrate on writing JavaScript.

And although the main goal of Babel is to translate the latest standards of ECMAScript (ES) for old — or sometimes current — browsers, it can do more. There’s an ecosystem of presets and plugins that make possible the addition of non-standard features as well. Each plugin makes a new feature/transformation available for your code, and presets are just a collection of plugins.

There are different ways to set up Babel depending on your project and the tools you use. In this article, we’re going to explain how to set up Babel using the CLI, although if you’re using a build system or framework, you can check out specific instructions on the official site. Most of the time the CLI is the fastest and easiest way to get started, so if you’re a first-time user, feel free to continue.

The first step to set up Babel in a project is to install the package using npm and add it as a dev dependency. Assuming you have a working Node.js environment already in place, it’s just a matter of running the following in your terminal:

mkdir babel-test
cd babel-test
npm init -y
npm install --save-dev babel-cli

This will create a directory (babel-test) change into the directory, initialize an npm project (thus creating a package.json file) and then install the babel-cli as a dev dependency.

If you need any help with the above, please consult our tutorials on installing Node and working with npm.

Next, we can open package.json and add a build command to our npm scripts:

"scripts": {
  "build": "babel src -d dist"
}

This will take the source files from the src directory and output the result in a dist directory. Then we can execute it as:

npm run build

But wait! Before running Babel we must install and set up the plugins that will transform our code. The easiest and quickest way to do this is to add the Env preset, which selects the appropriate plugins depending on the target browsers that you indicate. It can be installed using:

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

Then create a .babelrc file in the root of your project and add the preset:

{
  "presets": ["env"]
}

The .babelrc file is the place where you put all your settings for Babel. You’ll be using this primarily for setting up presets and plugins, but a lot more options are available. You can check the complete list in the Babel API page.

Please note that, depending on your operating system, files beginning with a dot will be hidden by default. If this is problematic for you (or if you just prefer fewer files), you can put your Babel settings in the package.json file, under a babel key, like so:

{
  "name": "babel-test",
  "version": "1.0.0",
  "babel": {
    // config
  }
}

Finally, let’s create the directories and files Babel is expecting to find:

mkdir src dist

And give it something to transform:

let a = 1;
let b = 2;
[a, b] = [b, a];
console.log(a);
console.log(b);

This example uses destructuring assignment to swap the values of two variables.

The post A Beginner’s Guide to Babel appeared first on SitePoint.