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?
tl;dr
Presets are just a collection of plugins. You can include plugins individually in the
plugins
array, or collection of plugins in thepresets
array. If a plugin is part of a collection (preset), you don't have to include it individually inplugins
.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:
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.