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?
Below is a
Babel transpilation of es6 arrow functions into regular es5.
You can try it yourself here.
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.
The most popular way to use
Babel is as part of a bigger building process using builders like
Rollup. Each of them has their own implementation of a tool that uses Babel as part of a build.
Similar tools can be found for other build tools.
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));
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: it can convert
Here is a repl example of how these features are transpiled to be supported in Internet Explorer 11:
@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.
Babel plugins and presets are configured using a configuration object that consists of
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
.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!