Presets

Don’t want to assemble your own set of plugins? No problem! Presets can act as an array of Babel plugins or even a sharable options config.

Official Presets

We’ve assembled some for common environments:

• @babel/preset-env
• @babel/preset-flow
• @babel/preset-react
• @babel/preset-typescript

Many other community maintained presets are available on npm!

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).

Subject to change

These proposals are subject to change so use with extreme caution, especially for anything pre stage-3. We plan to update stage-x presets when proposals change after each TC39 meeting when possible.

The TC39 categorizes proposals into the following stages:

• 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.

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

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

Creating a Preset

To make your own preset, you just need to export a config.

It could just return an array of plugins..

module.exports = function() {
  return {
    plugins: [
      "pluginA",
      "pluginB",
      "pluginC",
    ]
  };
}

Presets can contain other presets, and plugins with options.

module.exports = () => ({
  presets: [
    require("@babel/preset-env"),
  ],
  plugins: [
    [require("@babel/plugin-proposal-class-properties"), { loose: true }],
    require("@babel/plugin-proposal-object-rest-spread"),
  ],
});

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

Preset Paths

If the preset is on npm, you can pass in the name of the preset and babel will check that it’s installed in node_modules

{
  "presets": ["babel-preset-myPreset"]
}

You can also specify an relative/absolute path to your presets.

{
  "presets": ["./myProject/myPreset"]
}

Preset Shorthand

If the name of the package is prefixed with babel-preset-, you can use a shorthand:

{
  "presets": [
    "myPreset",
    "babel-preset-myPreset" // equivalent
  ]
}

This also works with scoped packages:

{
  "presets": [
    "@org/babel-preset-name",
    "@org/name" // equivalent
  ]
}

Preset Ordering

Preset ordering is reversed (last to first).

{
  "presets": [
    "a",
    "b",
    "c"
  ]
}

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”.

Preset Options

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:

{
  "presets": [
    "presetA",
    ["presetA"],
    ["presetA", {}],
  ]
}

To specify an option, pass an object with the keys as the option names.

{
  "presets": [
    ["@babel/preset-env", {
      "loose": true,
      "modules": false
    }]
  ]
}