CODEWITHSUNDEEP
javascriptbabeljs
neurozero
neurozero

Reputation: 1056

Babel plugin order when merging env options with non-env options

The Babel plugin docs say that:

  • Plugins run before Presets.
  • Plugin ordering is first to last.
  • Preset ordering is reversed (last to first).

The Babel .babelrc docs say that:

Options specific to a certain environment are merged into and overwrite non-env specific options.

The docs don't say exactly how they are merged.

I am using the boilerplate React project react-slingshot, and I want to take advantage of the class properties transform. The project uses babel-preset-stage-1, which includes babel-plugin-transform-class-properties. The class properties transform should let me write code like this:

class Example extends Component {
  static propTypes = {
    ...
  }
}

The .babelrc in that project is:

{
  "presets": [
    "react",
    "stage-1"
  ],
  "env": {
    "development": {
      "presets": [
        "latest",
        "react-hmre"
      ]
    },
    "production": {
      "presets": [
        ["latest", {
          "es2015": {
            "modules": false
          }
        }]
      ],
      "plugins": [
        "transform-react-constant-elements",
        "transform-react-remove-prop-types"
      ]
    },
    "test": {
      "presets": [
        "latest"
      ]
    }
  }
}

But when using this as is, I get:

Module build failed: SyntaxError: Missing class properties transform.

  5 |   class Example extends Component {
> 6 |     static propTypes = {
    |     ^
  7 |       ...
  8 |     }
  9 |

The class properties transform is there, but apparently the ordering is out of whack.

I did get it to compile without any errors by manually merging the non-env presets into the env presets, but now there is a lot of repetition:

{
  "env": {
    "development": {
      "presets": [
        "latest",
        "react-hmre",
        "stage-1",
        "react"
      ]
    },
    "production": {
      "presets": [
        ["latest", {
          "es2015": {
            "modules": false
          }
        }],
        "stage-1",
        "react"
      ],
      "plugins": [
        "transform-react-constant-elements",
        "transform-react-remove-prop-types"
      ]
    },
    "test": {
      "presets": [
        "latest",
        "stage-1",
        "react"
      ]
    }
  }
}

Is there any way to specify plugin order when using both env and non-env options?

Upvotes: 19

Views: 1731

Answers (1)

holi-java
holi-java

Reputation: 30696

.babelrc env inheritance like as class,it not deep copy presets/plugins.so this is why babel produce presets & plugins for developer to use in different ways.you can combine presets/plugins to share something..babelrc env inheritance like this below:

Object.assign({presets:['es2015']},env.development);
//it not merge your presets,that I have tested.
// if your env.development have a presets:['es2017'] then use es2017 otherwise use es2015

Upvotes: 0

Related Questions