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"}
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 .
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.
@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!
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With