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

What is Babel?

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)

Here is a link to the official Babel REPL.

Builders

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

A simple installation and usage of Babel through CLI

Babel Plugins

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

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

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

  • 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

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. Creating amazing frontends and rock-solid backends using top notch technologies and practices. Visit us at https://welldone.software.

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.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade