Presets

We’ve assembled a few presets for common environments:

Other Integrations

If you aren’t using Babel directly, the framework you are using may have its own configuration for you to use or extend. Many other community maintained presets are available !

Next.js | | Parcel | | Gatsby

Within a Babel config, if the preset is on , you can pass in the name of the preset and Babel will check that it’s installed in already. This is added to the presets config option, which takes an array.

Otherwise, you can also specify a relative or absolute path to your presets.

  1. {
  2.   "presets": ["./myProject/myPreset"]
  3. }

See for more specifics on configuring the path of a plugin or preset.

Stage-X (Experimental Presets)

Any transforms in stage-x presets are changes to the language that haven’t been approved to be part of a release of JavaScript (such as ES6/ES2015).

The categorizes proposals into the following stages:

  • Stage 0 - Strawman: just an idea, possible Babel plugin.
  • - Proposal: this is worth working on.
  • Stage 2 - Draft: initial spec.
  • - Candidate: complete spec and initial browser implementations.
  • Stage 4 - Finished: will be added to the next yearly release.

For more information, be sure to check out the current TC39 proposals and its .

The TC39 stage process is also explained in detail across a few posts by Yehuda Katz (@wycatz) over at thefeedbackloop.xyz: , Stage 2,

To make your own preset (either for local usage or to npm), you need to export a config object.

  1. module.exports = () => ({
  2.   plugins: [
  4.     require("@babel/plugin-proposal-object-rest-spread"),
  5.   ],
  6. });

For more info, check out the babel handbook section on presets.

Preset Ordering

Preset ordering is reversed (last to first).

Will run in the following order: c, b, then a.

This was mostly for ensuring backwards compatibility, since most users listed “es2015” before “stage-0”.

Both plugins and presets can have options specified by wrapping the name and an options object in an array inside your config.

For specifying no options, these are all equivalent:

  2.   "presets": [
  3.     "presetA", // bare string
  4.     ["presetA"], // wrapped in array
  5.     ["presetA", {}] // 2nd argument is an empty options object
  6. }