Babel-loader: Merged base options in .babelrc

Created on 24 Dec 2015  路  12Comments  路  Source: babel/babel-loader

https://github.com/babel/babel/blob/master/packages/babel-core/src/transformation/file/options/option-manager.js#L175

import { OptionManager } from 'babel-core';
function mergeBabelOpts(options = {}) {
  let optsManager = new OptionManager();
  optsManager.mergeOptions(options, 'base', null, path.dirname(__filename));
  return optsManager.init({
    filename: __filename
  });
}

Since nodejs support most es2015 feature, we could just use 'es2015-node5' on .babelrc.

For browser, we have to use es2015.
we could config in babel-loader. but if we do this, we will lost other options.

So, could we do like babel-register ?
https://github.com/babel/babel/blob/master/packages/babel-register/src/node.js#L55

Most helpful comment

An important note is that babelrc does not merge if you define presets in an env.

Should be mentioned in docs.

All 12 comments

In [email protected] need to change to

import path from 'path';
import { OptionManager } from 'babel-core';

export default function mergeBabelOpts(options = {}) {
  const optsManager = new OptionManager();

  optsManager.mergeOptions({
    options,
    alias: 'browser',
    dirname: path.dirname(__filename)
  });

  return optsManager.init({
    filename: __filename
  });
}

Sounds like you want to use BABEL_ENV

https://babeljs.io/docs/usage/babelrc/#env-option

.babelrc
{
  "presets": ["some-preset-for-both"],
  "plugins": ["some-plugin-for-both"]
  "env": {
    "node": {
      "presets": ["es2015"]
   },
   "browser": {
      "presets": ["es2015-node5"]
    }
  }
}
package.json
{
  "scripts": {
    "build:browser": "BABEL_ENV=browser webpack ...etc...",
    "build:node": "BABEL_ENV=node webpack ...etc..."
  }
}

You could also set BABEL_ENV inside your webpack config instead I imagine.

I know the BABEL_ENV,
but when we add extra babel config in babel-registry锛宨t will merge the extra config with .babelrc
Just hope babel-loader could have the same behaviour.

An important note is that babelrc does _not_ merge if you define presets in an env.

@STRML is it true for plugins?

Yes, plugins merge @havenchyk.

@STRML

An important note is that babelrc does not merge if you define presets in an env.

anyway around this? I'm using babel-preset-env to only compile to supported browsers and trying to only compile to chrome in dev mode (as all the devs in my team only use chrome) this gives us advantages of babel not having to compile yields and awaits which makes things a bit nice when debugging. Annoyingly it's not working and I assume this is why.

You could load in your babelrc with JSON5, make your overrides, and pass it directly to the loader, while setting babelrc: false to ignore any existing babelrcs.

See also https://github.com/babel/babel/issues/4630 which hopefully will make it into Babel 7.

Ok thanks.

It overrides it if I leave the default preset to have no config

  "presets": [
    "env",
  ]

and then overwrite it in the development env so i can live with that for now.

Hopefully babelrc.js happens will make my life much easier!

Thanks again

An important note is that babelrc does not merge if you define presets in an env.

Should be mentioned in docs.

I'm triaging old issues on babel-loader. Since this has been inactive for ages, I'm going to close it. Feel free to re-open if there's still something to discuss, but I'm assuming at this point it's been too long to address in a useful way.

Was this page helpful?
0 / 5 - 0 ratings