What is the difference between babel-plugin-* and babel-preset-*

babeljs, javascript, reactjs

Solution

In short, a babel preset contains multiple babel plugins.

For example, if you only use arrow functions, you only need the `transform-es2015-arrow-functions` plugin. If you use a lot of ES2015 features, you better use `babel-preset-es2015` which contains a lot of plugins including `transform-es2015-arrow-functions`.

Problem

I am using both plugin and preset and my current react app but technically I am not able to make someone understand what is difference between preset and plugins. For me both are the javascript file which used by babel loader to compile the code.

Original source