As front-end developers, we're well aware that different browsers (and versions) support different web platform features. We make choices based on the support of those features balanced with what analytics tell us about what browsers our users use. For example, if our Google Analytics tell us only 0.01% of users are left on IE 9, perhaps we'll decide it's OK to start using Flexbox and
While support for ES6 is always increasing, we can't always assume that users will be using a browser that supports all its features. So, in order to utilize ES6 features now and make sure we won't run into cross-browser compatibility issues, we need to transpile our code.
Let's look at two possible ways we can perform the task of transpiling our code. First, we will use npm scripts and Babel. For the second, we will look at using Gulp with Babel.
Have you ever been working with those sweet new ES6 arrow functions, run into a problem, and noticed that now your stack trace is all anonymous functions? Yeah, that's not so great. That's why this Babel plugin is so useful. You can add names to your ES6 arrow functions, and it makes debugging a lot more simple.