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?

Vitali Zaidman
Jul 4, 2019 · 4 min read
Image for post
Image for post

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

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.

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.

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.

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.

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!

Welldone Software

The leading full-stack consultancy.

Thanks to Dani Kenan

Vitali Zaidman

Written by

https://twitter.com/vzaidman ⎝(•ω•)⎠ https://vzaidman.com

Welldone Software

The leading full-stack consultancy. Creating amazing frontends and rock-solid backends using top notch technologies and practices. Visit us at https://welldone.software.

Vitali Zaidman

Written by

https://twitter.com/vzaidman ⎝(•ω•)⎠ https://vzaidman.com

Welldone Software

The leading full-stack consultancy. Creating amazing frontends and rock-solid backends using top notch technologies and practices. Visit us at https://welldone.software.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store