Babel presets

In this section, we will learn about the presets in Babel. If we don't want to combine plugins manually, we can use preset as a combination of Babel plugins, or share options configuration.

There are more than one hundred kinds of official plug-ins and presets for Babel 7.8. If we learn one by one, it will take a lot of time. But we don't need to learn all of them, because in actual use, there are only a few commonly used presets and plug-ins. We can focus on these commonly used ones. After mastering, other plug-ins and presets will become simple.

Official Preset

The official has compiled some presets for commonly used environments, as shown below:

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

These presets are maintained by the community and can be downloaded through the npm command. We can download and use according to the needs of the project. For example, a common vue project. In Babel's official presets, only one @babel/preset-env is needed.

Stage-X experiment presets

The syntax conversion in the stage-x presets will be changed accordingly as they are approved as part of the new version of JavaScript (for example, ES6/ES2015).

TC39 divides the proposal into the following stages:

• Stage 0-Strawman: Just an idea, there may be a Babel plug-in.
• Stage 1-Proposal: This is worth following up.
• Stage 2-Draft: Initial specification.
• Stage 3-Candidate: Complete the specification and implement it on the browser.
• Stage 4-Finished: Will be added to the next annual version release.

Create preset

If we need to create our own preset, we only need to export a copy of the configuration.

Example:

It can be an array of plugins, for example:

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

Preset can contain other presets, as well as plug-ins with parameters:

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

Default path

If the preset is on npm, we can enter the name of the preset, and babel will check whether it has been installed in the node_modules directory:

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

Or you can specify an absolute or relative path to preset, as shown below:

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

Short name of Preset

If the prefix of the preset name is babel-preset-, we can use its short name, that is, omit the babel-preset- prefix.

Example:

For example, the short name of babel-preset-myPreset is myPreset:

{
  "presets": [
    "babel-preset-myPreset", // 相当于myPreset
    "myPreset"
  ]
}

This also applies to presets with a scope:

{
  "presets": [
    "@org/babel-preset-name", // 相当于@org/name
    "@org/name" 
  ]
}

Sort order of Preset

The presets are sorted in reverse order, that is, sorted from back to front.

Example:

Let's look at the following example:

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

The execution sequence is c, b, a, from back to front. This is mainly to ensure backward compatibility, as most users put "es2015" before "stage-0".

Preset parameters

Both plug-in and preset can accept parameters. The parameter is an array composed of the plug-in name and the parameter object, which can be set in the configuration file.

If no parameters are specified, the following forms are the same:

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

To specify parameters, pass an object with the parameter name as the key, for example:

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