Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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.

like image 200
Jitender Avatar asked May 05 '17 04:05

Jitender


People also ask

What is the difference between Babel plugin and Babel preset?

Presets vs 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.

What are presets and plugins in Babel?

In Babel, a preset is a set of plugins used to support particular language features. The two presets Babel uses by default: es2015 : Adds support for ES2015 (or ES6) JavaScript. react : Adds support for JSX.

What is Babel preset?

@babel/preset-env is a smart preset that allows you to use the latest JavaScript without needing to micromanage which syntax transforms (and optionally, browser polyfills) are needed by your target environment(s). This both makes your life easier and JavaScript bundles smaller!

What is Babel plugin?

Babel is a toolchain that is mainly used to convert ECMAScript 2015+ code into a backwards compatible version of JavaScript in current and older browsers or environments.


1 Answers

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.

like image 170
Khang Lu Avatar answered Sep 27 '22 23:09

Khang Lu