Monday, 9 November, 2015 UTC
Summary
Over the last year, Babel has become the go-to tool for transforming ES2015 and JSX into boring old JavaScript. Which makes it kinda hilarious that by default, Babel 6 no longer transforms either:
james$ echo "export function component() { return <div /> }" | babel
SyntaxError: unknown: Unexpected token (1:37)
> 1 | export function component() { return <div /> }
| ^
So what happened? Well, in the brave new world of Babel 6, you need to choose which transforms to run. This promotes separation of concerns, and a “shit shit” moment when suddenly nothing works.
But luckily, this doesn’t mean that you’ll now need to comb through the bug trackers and documentation for seemingly every part of your build system…
The Babel 6 Basics
Before anything, you’ll want to get familiar with the new package structure of Babel 6, the new concept of presets, and the
.babelrc file which you now can’t do without. A two minute skim through The Six Things You Need To Know About Babel 6 will sort you out.Once you’ve got a grasp of the basics, all that’s left is to apply them to your project. To do so, simply pick the relevant recipes from this list and then follow along.
The Recipes
- Transforming NPM Packages with the Babel 6 CLI
- Transforming Web Apps with Webpack’s babel-loader
- Testing with Mocha and Babel
- Running tasks with
gulpfile.babel.js - Slimming your output with babel-plugin-transform-runtime
- Enabling decorators and other ES7 features with babel-preset-stage-0
I’ll be releasing one of these articles each day over the coming week. Want to read them all? Not a problem — you can even get the whole thing delivered direct to your inbox as a free six day e-mail course, exclusive to my Newsletter subscribers.
To get started, just enter your e-mail below. And in return for your e-mail, you’ll also immediately receive three bonus PDF cheatsheets – on ES6, JavaScript promises and React (see preview).
I will send you useful articles, cheatsheets and code.
I won't send you useless inbox filler. No spam, ever.
Thanks! Please check your email for the link to your cheatsheets.
There was an error submitting your subscription. Please try again.
First Name
Email Address
I'd like to receive the free email course.
Subscribe for free
Unsubscribe at any time.
One more thing – I love hearing your questions, offers and opinions. If you have something to say, leave a comment or send me an e-mail at [email protected]. I’m looking forward to hearing from you!
Read More
- Setting up Babel 6 at the Babel Blog
- The Six Things You Need To Know About Babel 6
- ES6 – The Bits You’ll Actually Use
- Webpack Made Simple: Building ES6/LESS with Autorefresh
- See Babel and Webpack in action in the Unicorn Standard Starter Kit
The post Six Recipes for Babel 6 appeared first on James K Nelson.