The ES6 transpiler landscape has a clear leader: Babel. Renamed from 6to5 just last month, Babel is rapidly becoming the standard way to write modern JavaScript today. After a year of Traceur vs 6to5 debates, the community is consolidating.
Why Babel Won
Traceur was first—Google's reference implementation of ES6. But being first doesn't guarantee winning. Babel (6to5) focused on pragmatic concerns:
Readable output. Babel's compiled code looks like JavaScript you'd write. Traceur's output includes runtime helpers and is harder to debug.
Smaller output. Babel avoids unnecessary transforms. If your target supports a feature, Babel leaves it alone. Traceur transpiles everything.
Faster compilation. Babel is simply faster. For large codebases, this matters during development.
Plugin ecosystem. Babel's plugin architecture lets you customize transforms. Want JSX? There's a plugin. Experimental features? Plugins. This flexibility is powerful.
Better source maps. Debugging transpiled code requires good source maps. Babel's are excellent.
The technical advantages created momentum. Framework authors adopted Babel (React, Ember, Angular). Build tool integrations appeared (Webpack, Gulp, Grunt). Once the ecosystem chose Babel, the network effects took over.
The ES6 Reality
ES6 finalized in June last year, but browser support is years away. Even when browsers ship ES6, supporting older browsers means transpiling for years.
This makes transpilers infrastructure, not temporary bridges. Babel isn't a workaround—it's how we write JavaScript for the foreseeable future.
This shift in thinking matters. Previously, transpilers felt experimental. Now they're essential tooling, like minifiers or linters. Teams that resisted transpiling are accepting it as standard practice.
The Stage System
Babel's stage system for experimental features is clever:
- Stage 0: Strawman (ideas)
- Stage 1: Proposal (worth pursuing)
- Stage 2: Draft (initial spec)
- Stage 3: Candidate (complete spec, initial implementations)
- Stage 4: Finished (shipping in browsers)
You choose how experimental you want to be. Conservative teams use only Stage 3+. Cutting-edge teams enable Stage 0. This makes the risk explicit.
Compare to Traceur, which included all proposals with no clear stability signals. Babel's staging helps teams make informed decisions about which features to adopt.
Configuration Complexity
Babel's flexibility creates configuration overhead:
{
"presets": ["es2015", "react", "stage-2"],
"plugins": ["transform-decorators-legacy"],
"env": {
"development": {
"plugins": ["transform-runtime"]
}
}
}Presets, plugins, environment-specific config—there's a learning curve. The defaults are good, but customization requires understanding Babel's architecture.
This is the classic power-vs-simplicity trade-off. Babel chose power. For simple projects, this feels like over-engineering. For complex projects, the flexibility is essential.
Performance Considerations
Transpiled code isn't always as fast as hand-written ES5. Classes compile to more code than constructor functions. Spread operators become function calls. Generators require regenerator runtime.
For most applications, this doesn't matter—network and DOM operations dominate. But for performance-critical code, transpiler output needs scrutiny.
Babel's advantage is readable output. You can see what the transpiler generates and optimize accordingly. With Traceur's complex output, optimization is harder.
The Ecosystem Effect
Once Babel became standard, libraries started publishing ES6 source with transpilation left to consumers. This creates complications:
- Should libraries ship ES5 for compatibility?
- Should they ship ES6 and require consumer transpilation?
- Should they ship both?
There's no consensus yet. Different approaches create friction—some libraries expect to be transpiled, others don't. Package.json's "jsnext:main" field helps but isn't universal.
This will shake out as patterns emerge, but right now it's messy.
Looking Forward
ES6 is the baseline, but JavaScript keeps evolving. ES7 (ES2016) features are already proposed—async/await, decorators, class properties. Babel lets us experiment with these now.
The pattern of "write future JavaScript, transpile for today" is established. Whether browsers eventually catch up enough to make transpiling optional is unclear. Maybe. But not for years.
For now, Babel is JavaScript's compiler. Not using a transpiler is like not using a build tool—technically possible but increasingly rare.
Resources:
- Babel – Official site and documentation
- Babel Plugin Handbook – Guide to plugins
- ES6 Compatibility Table – Browser support tracking
