Whats the difference between babel-preset-es2015 and babel-preset-env?

Question

I'm currently trying to understand about babel configuration, but got confused by babel-preset-**, there are many preset in babel, like env, es2015, react and others, I do understand that babel-preset-es2015 is needed to transpile es2015 code to previous js code so it can be understood by most/older browser, what about babel-preset-env?

What are the differences between those presets? Can one use env without using es2015 or vice versa? and what are the cases when we need those two presets to be present on our project build system?

Thank You.

Answer 1

The babel-preset-es20XX (15, 16, 17) presets include transforms needed to convert features added in that specific year to code that is compatible with the previous version.

babel-preset-env includes transforms for all features that have landed in the spec, but only enables the ones needed to make the features work based on the set of environments you've provided to it. If you pass no options to env it essentially works like es2015, es2016, es2017 all together.

babel-preset-react is the set of transformations needed to convert React/Facebook-related syntax extensions like Flowtype and React's JSX.