Babel.js Guide -Part 1- The Absolute Must-Know Basics: Plugins, Presets, And Config

What is Babel and how to use it? What are presets and plugins, and in what order Babel applies them?

What is Babel?

Babel is a free and open-source JavaScript transpiler (kind of like a JavaScript compiler). It converts JavaScript code to a different JavaScript code based on how you configure it.

The most famous use of Babel is converting modern JavaScript es6+ into es5, which is widely supported (even in Internet Explorer).

Transformation of ES6 into ES5- illustration :P

Below is a Babel transpilation of es6 arrow functions into regular es5.

Before and after: a transpilation of an arrow function into a regular function.

You can try it yourself here.

Using Babel

Online REPL (Read–Eval–Print Loop)

This is the simplest way to use Babel. Not a very practical one, but the quickest to test / experiment how Babel works.

Here is a link to the official Babel REPL.

Builders

The most popular way to use Babel is as part of a bigger building process using builders like Webpack, Gulp, or Rollup. Each of them has their own implementation of a tool that uses Babel as part of a build.

For example:

Webpack uses babel-loader:

Webpack utilizing Babel

Rollup uses rollup-plugin-babel:

Rollup utilizing Babel

Similar tools can be found for other build tools.

CLI

You can use Babel through the command line with the @babel/cli package.

A simple installation and usage of Babel through CLI

Babel Plugins

Babel is configured through plugins. Out of the box, Babel doesn’t change your code. Without plugins, it basically acts this way:
const babel = code => code;

By running the code through Babel plugins your code transpiles into a new code like so:
const babel = code => babelPlugin2(babelPlugin1(code));

Babel Presets

You can add a list of Babel plugins separately, but usually a more convenient way is to use Babel presets.

Babel presets combines a list of plugins. The options you pass to the preset affects the plugins it aggregates. These options control both what plugins would be used and the configuration of these plugins.

For example, the @babel/plugin-transform-arrow-functions Babel plugin that we saw earlier is part of the @babel/preset-env Babel preset.

@babel/preset-env is probably the most popular preset. It converts modern JavaScript to an older JavaScript version based on the target Browser / Environment passed to the preset by the user (What “modern JavaScript” means will be expanded upon in a separate article to come).

For example: it can convert ()=>arrowFunctions, {…detructuring}, and Classes{} to a JavaScript syntax that is supported by older browsers.

Here is a repl example of how these features are transpiled to be supported in Internet Explorer 11:

Original code, and a transpiled version of the code that supports IE11.

Notice how @babel/preset-env can also transpile code for the latest 10 Chrome versions. Since Chrome DOES supports all the features mentioned above out of the box, @babel/preset-env doesn’t change the code at all: check it out here.

We will discuss @babel/preset-env and other presets more in depth in the articles to come.

Configuration Files

Babel plugins and presets are configured using a configuration object that consists of presets and plugins (several other advanced properties can be used as well).

For simple configs, .babelrc is used. babelrc is a JSON5 file (like JSON where comments are allowed and sometimes recommended) that when put in the root of the project, configures babel.

For more complex configurations a babel.config.js file in the project’s root is used instead. Since it’s a JavaScript file, it’s much more flexible than .babelrc. For example:

Some config files can be quite complex. For example, check out the babel.config.js of the Babel project itself. There’s no need to panic! After reading this guide series, you will understand every single line of this complex configuration.

Babel Plugins and Presets Application Order

If you mix plugins and presets in your config, Babel will apply them in the following order:

• The plugins are applied first, top to bottom.
• Then, the presets are applied after the plugins, bottom to top.

• Also, it’s worth mentioning, the plugins inside each preset are applied top to bottom as well.

Applying your plugins and presets in the right order is very important!
The right order might speed up your transpilation. The wrong order might produce unwanted results.

Babel Plugins and Presets Options

Options can be passed to Babel plugins and presets by wrapping them in an array and adding an options object to it:

We will discuss the options you can pass to the most used Babel presets in future articles of this series.

Stay tuned for future next articles in this series discussing Babel and it’s many possibilities!