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).
Below is a Babel
transpilation of es6 arrow functions into regular es5.
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
:
Rollup
uses rollup-plugin-babel
:
Similar tools can be found for other build tools.
CLI
You can use Babel through the command line with the @babel/cli
package.
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:
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!