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

javascript webpack babeljs
xcode picture xcode · Mar 13, 2017 · Viewed 12k times · Source

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

loganfsmyth picture loganfsmyth · Mar 13, 2017

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.

Related questions

Getting Unexpected Token Export

I am trying to run some ES6 code in my project but I am getting an unexpected token export error. export class MyClass { constructor() { console.log("es6"); } }

Read More
babel-loader jsx SyntaxError: Unexpected token

I'm a beginner in React + Webpack. I found a weird error in my hello world web app. I'm using babel-loader in webpack to help me convert jsx into js, but it seems like babel can't understand jsx syntax. Here are …

Read More
"You may need an appropriate loader to handle this file type" with Webpack and Babel

I am trying to use Webpack with Babel to compile ES6 assets, but I am getting the following error message: You may need an appropriate loader to handle this file type. | import React from 'react'; | /* | import { render } from 'react-dom' Here …

Read More