Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Babel 6 presets specified in .babelrc not working

as the title suggests, basically according to the docs, with the new Babel 6 we are now supposed to pass in plugins/presets since by default it would not do anything with our code.

So I created a .babelrc file in my project directory with the following (just like in the docs)

{
  "presets": ["es2015"]
}

However this would not work. Since I'm using webpack and babel-loader, I came across a different answer that suggested to put something like this in the webpack config:

{
     test: /\.js$/, exclude: /node_modules/, loader: "babel", query: {
         presets: ["es2015"]
     }
}

And this works. So my question is whether this is a bug in the new Babel or there is something obviously wrong that I'm missing? I used to use Babel 5 and Webpack, and I was able to specify the babel config in .babelrc no problem...

Thanks in advance

EDIT: The problem only occurred when running the eslint loader before the babel loader. However just updated to latest babel-loader 6.2.0 and everything is working again.

    module: {
        preLoaders: [
            { test: /\.js$/, exclude: /node_modules/, loader: "eslint"}
        ],
        loaders: [
            { test: /\.js$/, exclude: /node_modules/, loader: "babel"},
            { test: /\.css$/, exclude: /node_modules/, loader: "style!css!postcss"}
like image 325
luanped Avatar asked Nov 08 '15 11:11

luanped


People also ask

What is a .babelrc file?

The . babelrc file is your local configuration for your code in your project. Generally you would put it in the root of your application repo. It will affect all files that Babel processes that are in the same directory or in sibling directories of the . babelrc .

What is the difference between Babelrc and Babel config JS?

Babel has two parallel config file formats which can be used together, or independently. . babelrc would be useful if you want to run certain transformations / plugins on a subset of files /directories. Maybe you have 3rd party libraries that you don't want to be transformed/changed by babel.

What is included in Babel preset ENV?

@babel/preset-env is a smart preset that allows you to use the latest JavaScript without needing to micromanage which syntax transforms (and optionally, browser polyfills) are needed by your target environment(s). This both makes your life easier and JavaScript bundles smaller!


1 Answers

It seems to be a problem with babel-loader. It should be fixed in release 6.1.0.

You can see the release/v6.1.0 summary:

 * release/v6.1.0:
 Update CHANGELOG.md and package.json
 Set source file name relative to options.sourceRoot
 Allow babelrc to be specified for cache purposes
 Add BABEL_ENV || NODE_ENV to default cacheIdentifier

So updating babel-loader will suffice.

like image 85
dreyescat Avatar answered Oct 31 '22 01:10

dreyescat