Multiple envs: 1 for node, 1 for browsers

[verekia]

Let's say we are using Babel on both the back-end with Node and on the front-end with Webpack. What would be the correct way to setup babel-preset-env so that it performs minimal transformations for Node, but more transformations for browsers when building with Webpack?

From my understanding, Babel considers the lowest common denominator, even between different beasts like Node and browsers. Therefore, the following does not work from the tests I've run:

"targets": {
  "node": "current",
  "browsers": "> 1%"
},

What would be your recommendation in such situation? Using 2 different .babelrc files?

Is it something you plan to address in the future?

Thanks

[mozmorris]

We're doing something similar where our e2e tests also use Babel. Our config looks like this (stripped down for brevity)

{
  "presets": [
    "react",
    ["env", {
      "targets": {
        "electron": "current"
      },
      "modules": false,
    }]
  ],
  "env": {
    "test-e2e": {
      "presets": [
        "react",
        ["env", {
          "targets": {
            "node": "current"
          },
        }]
      ],
    },
  }
}

We use BABEL_ENV when running our tests: e.g. BABEL_ENV=test-e2e NODE_ENV=test mocha ...

[yavorsky]

@mozmorris Nice solution! Also, options specific to a certain environment are merged into and overwrite non-env specific options, so you can set react once in common config.

[existentialism]

If you have a bunch of options or conditionals, another option (which I'm currently using) is to build a preset ala https://github.com/facebookincubator/create-react-app/blob/master/packages/babel-preset-react-app/index.js

Similarly, once .babelrc.js support lands, there should be plenty of options to get your babel configured properly!

[existentialism]

Closing for now, as there's nothing really actionable from this side.

@verekia let us know if you run into any additional issues (and fair warning, there be some dragons with using the env option :D)