Frequently Asked Questions and Answers
As a rule of thumb, IE9+. You can support IE8 by limiting yourself to a subset of ES6 features. The Caveats page goes into the details of supporting legacy browsers.
Many issues plague current transpilers, babel takes a unique approach to many aspects.
Many transpilers require a globally polluting polyfill and runtime. babel has various ways to avoid this, including concise code that utilises minimal inline helpers as well as features such as selfContained that enable library authors to utilise ES6 methods without the aforementioned polyfill.
babel cares immensely about your output code. Not only should it not be bound to a bulky runtime but it should always retain as much of the source formatting as possible (newlines and comments).
Source maps are critical in the context of transpiled languages. This enables you to seamlessly write and debug your code without worrying about what it turns into.
With support for ES6 being implemented into engines at a rapid rate it's critical that certain transformations have the ability to be turned off. With babel every single transformation can be turned off. Classes get supported in your target environment? Simply disable it and reap the benefits of all the other transformers.
As you can tell by the comparison page, the babel featureset is very comprehensive, supporting every ES6 syntactic feature. With built-in support for emerging standards such as Flow and JSX/React it makes it extremely easy to integrate.
Babel is very flexible in it's usage, it has support for an extensive range of build systems as well as for the browser, node and more!.
A transformer is a module that is ran against your code that transforms it. For example,
the arrowFunctions transformer has the very specific goal of transforming
ES6 Arrow Functions to the equivalent ES3. This allows transformers to be disabled and enabled at will which is critical in the
current fast paced development environment.
A module formatter is a transformer that turns exports and imports into their equivalent
target format. For example, the common module formatter transforms
import { foo } from "bar"; into the CommonJS var foo = require("bar").foo;
Array.from and Symbol in my code?! These don't exist!This is a known caveat. This is because babel compiles to ES3 syntax but with ES5 and ES6 methods. This is essential to emulate a complete ES6 environment so your code wont break! You see, ES6 features such as iterators and symbols require a lot of logic to work, and to accurately support these it would mean a lot of boilerplate smoshed into your codebase. This is the approach taken by other transpilers but babel approaches it quite differently.
You have two options, depending on your use case: