What is a babel preset? What does stage mean?

Question

What is a babel preset and why do I need it?

There are several questions about specific babel presets but none explain the need for it (e.g. what's the difference between babel-preset-stage-0, babel-preset-stage-1 etc)

Also the babel docs do not explain the necessity: https://babeljs.io/docs/plugins/preset-latest/

Answer 1

Babel Presets:

• Technically presets are collections of plugins (as Quentin says)
• The usecase is the support of particular language features.

Read this excellent post: https://www.fullstackreact.com/articles/what-are-babel-plugins-and-presets

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

... ES2015 is just another name used for ES6 ... [1]

Preset stages:

Stages represent the status of experimental features. Pre stage-3 should be used with caution.

... Beyond ES7, proposed JavaScript features can exist in various stages: [1]

stage-0 - Strawman: just an idea, possible Babel plugin.

stage-1 - Proposal: this is worth working on.

stage-2 - Draft: initial spec.

stage-3 - Candidate: complete spec and initial browser implementations.

stage-4 - Finished: will be added to the next yearly release. [2]

[1] https://www.fullstackreact.com/articles/what-are-babel-plugins-and-presets

[2] https://babeljs.io/docs/plugins/

Answer 2

From the docs:

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

Babel is a tool for transforming JS.

A plugin a some code for performing a particular transformation.

You have to specify which plugins you want to use with a config.

A preset is just a prewritten config you can use to get common sets of transforms.