Babel-loader: Setup BABEL_ENV for Webpack2 via loader

[nodkz]

Need the ability to pass the desired environment name to babel via babel-loader.

I have such .babelrc:

{
  "presets": [
    "es2015",
    "stage-0",
    "react"
  ],
  "env": {
    "webpack2": {
      "presets": [
        ["es2015", {"modules": false}],
        "stage-0",
        "react"
      ],
    }
  }
}

I'm starting webpack via run script which written with es6 modules. But if I start script with BABEL_ENV=webpack2 then it requires rewriting all scripts to commonjs style.

Furthermore I should rewrite all app, cause use Relay with babelRelayPlugin.

So the better way to use Webpack2 with passing env value via babel-loader settings.

[blacksonic]

the es2015 preset setup you are using is missing the loose property set to true

[blacksonic]

look at my comment in this issue https://github.com/babel/babel-loader/issues/282

[nodkz]

@blacksonic what does loose property means? This question worried me about 2 months, but all tries to found answer failed.

[danez]

Can you please explain what your problem is? I'm sorry but I didn't get exactly what you are saying.

If you set BABEL_ENV to webpack2 it should pick up the correct babel config from you .babelrc

[nodkz]

@danez sorry, my fault.

I'm using webpack bundler with multiple configs (server, client, admin, ...).
Right now BABEL_ENV is common for a build-script that starts webpack and for babel-loader. So will be cool if babel-loader has an additional option that can allow choosing another babel environment rather than provided via BABEL_ENV.

Lookup behavior for babel-loader:

• env option in the query
• BABEL_ENV
• NODE_ENV

PS. This is a very cool feature for the transition period when we want to use webpack2, but V8 does not supports import. So I'll run build script with ENV with {"modules": "commonjs"} needed for proper work of some plugins and set ENV with {"modules": false} in runtime for babel-loader that transforms source files for tree shaking.

[blacksonic]

@nodkz here is a good explanation in the release notes
https://github.com/babel/babel/blob/master/CHANGELOG.md#v6130-2016-08-04

[nodkz]

@blacksonic many thanks!

Catch the loose mode keywords from your link.

...many transforms have a “loose” mode which drops some spec behavior in favor of simpler and more performant generated code.

Example of how initial ES6 code generated to normal and loose code

[moimael]

I'm in the exact same situation, is there a workaround in the meantime ?

[saiichihashimoto]

+1

[moimael]

Are maintainers ok on principle to add an env query parameter to babel-loader ?

[danez]

👍

[teonik]

+1...This behaviour certainly is useful.To get something similar to what @nodkz is talking about i create a separate babelrc and reference it via the 'extends' query option.Not very clean IMHO 'cause my babel configuration is split in two files, one for the build tools and one for webpack bundling.But gets the job done.Did anyone else tackle this problem differently?