Understanding .babelrc

Question

I have been searching for the answer related to presets key in the .babelrc. Can someone explain to me what does it mean to give 'env', 'stage-0', 'es2015' etc?
It would be great if I can get to know the better way to set the presets.

Answer 1

So I did some reading, here what I got to know.

In your webpack, when babel-loader is used as a transformer for .jsx files, it calls your .babelrc file. In your webpack you can pass options to the loader by using the options property. This loader also supports other loader-specific option: 1) cacheDirectory 2) cacheIdentifier 3) babelrc

Talking about babelrc, babel-loader pick up options from .babelrc files, if it is set as true (by default), else it will be ignored.

Babel acts as a transpiler for jsx and es6 code, for browser's understanding. Using preset options you can tell babel how to do the understanding. This is done by providing presets in .babelrc.

Here are important presets to know:

1) es2015: Compiles ES2015 to ES5. That will allow babel to transpile all the features of ES2015 if present in our file. 2) react: Transform JSX into createElement calls. 3) env: Contains all yearly presets so users won’t need to specify each one individually. It currently includes es2017, es2016, es2015. 4) latest: It is deprecated now since it is same as env.

If you want to stay up to date, use the env preset for es6.

Ref: https://babeljs.io/docs/, https://github.com/babel/babel-loader