Difference between plugins and presets in .babelrc

Question

Situation

So I have a .babelrc like this:

{     "presets": [         "es2015",         "stage-2",         "react"     ],     "plugins": [         "transform-decorators-legacy"     ] } 

Question

What is the difference between presets and plugins? Which one should I use to configure Babel?

Answer 1

tl;dr

Presets are just a collection of plugins. You can include plugins individually in the plugins array, or collection of plugins in the presets array. If a plugin is part of a collection (preset), you don't have to include it individually in plugins.

The same goes for npm packages when you include them in package.json.

Presets vs Plugins

Babel has lots of official and third party plugins. Presets are collections of plugins or as they say:

Presets are sharable .babelrc configs or simply an array of babel plugins.

An important difference between the two is that plugins are loaded before presets.

Plugins of a preset

The most common presets are the official ones and the discontinued experimental presets.

Most of the official presets contain plugins to transpile features of the EcmaScript standards, while the experimental (stage-x) presets contained plugins that transpiled future experimental features whose standardization is still a work in progress. These experimental/proposal presets are deprecated since Babel 7. They have a blog entry on the reasons. Read the section below to see how they worked.

When you click on a preset, you can see which plugins (and maybe other presets) are included in it. If you include a plugin via a preset you don't have to include it individually. The same goes for package.json when you include the npm packages of the presets.

Deprecated proposal preset system

Going from stage 0 (just an idea) to stage 3 (candidate) you had collections of plugins that were more closer to getting standardized. Because of this, when you included a preset, every preset with a higher stage-x value were included too. The plugins contained in these presets were continuously varying in each version, since they are a work in progress, and there is a chance that plugins will be removed if they got rejected. That is why you needed transform-decorators-legacy because, decorator transpiling was earlier removed from Babel, although they added it back later.