Babel(3) : Presets for Babel

The default for Babel can be thought of as a set of Babel plug-ins or as shareable modules configured with Options.

Official preset

Babel has written some presets for common environments

Other integration

If you’re not using Babel directly, the framework you’re using may have its own configuration for you to use or extend. Many other community-maintained presets are also available on NPM!

Next.js \ Nuxt.js \ Parcel \ Jest \ Gatsby

Use the default

In the Babel configuration, if the default is on NPM, you can pass in the default name and Babel will check to see if it is already installed in node_modules.

These presets are added to the presets, which can be an array:

{
  "presets": ["babel-preset-myPreset"."@babel/preset-env"]}Copy the code

You can also specify presets for relative/absolute paths

{
  "presets": ["./myProject/myPreset"]}Copy the code

For more details on configuring plug-ins or default paths, see Name Normalization.

Create a preset

If you want to create your own preset (either for local use or to publish to NPM), you need to export a configuration object.

We can return an array of plugins:

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

Preset can contain other preset, 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")]});Copy the code

For more information, refer to the Preset chapter, or click on a follow up and wait for my update

The preset order of arrangement

Preset is in reverse order (from back to front)

{
  "presets": ["a"."b"."c"]}Copy the code

It will be executed in the following order: C, B, A, mainly to ensure backward compatibility.

Default parameters

Both plug-ins and preset can accept parameters, which consist of an array of plug-in names and parameter objects that can be set in the configuration file.

If no argument is specified, the following forms are the same:

{
  "presets": [
    "presetA".// The value is a string
    ["presetA"].// An array
    ["presetA", {}] // The second argument is an empty options object]}Copy the code

To specify an argument, pass an object with the argument name as the key:

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