How To Set Up the Babel Plugin in WebStorm
Note, this post was written for Babel 5. It has been re-written for Babel 6, “How To Set Up the Babel 6 Plugin in WebStorm”.
I’ve been enjoying programming in ECMAScript 6 recently. I use the Babel plugin for WebStorm to compile ES6 code down to ES5 code that can be run in the browser.
Babel has several advantages over Traceur. Babel and Traceur both support all (or nearly all) of the ECMAScript 6 features but Babel already has plans to begin support for proposed ECMAScript 7 features. When I last looked at Traceur, it required a run time JavaScript library to support some of the ECMAScript 6 features. Reportedly, Babel also produces more readable code.
But I always have trouble remembering how to set up the plugin and I haven’t tried setting up Babel on a permanent basis because I wasn’t sure if I’d continue using it (versus Traceur).
To install Babel on your computer,
npm install -g babel
For my reference (and yours, if you choose), here’s how to set up Babel in WebStorm:
- Create a Scope
- Set JavaScript version to ECMAScript 6
- Add the Babel file watcher
- Set the arguments
$FilePathRelativeToProjectRoot$ --source-maps --out-dir out
- Set the Working Directory
$ProjectFileDir$
- Set the Output Path to Refresh
out
- Set the file scope to the scope you created earlier
- Set the arguments
- Files will now be transpiled to ECMAScript 5 in the
out
directory
Hi what about debbuging via webstorm is it working ?
Sorry, I don’t use WebStorm for debugging. I pretty much only debug in the browser or terminal window (for NodeJS apps).
I need to learn more about WebStorm debugging.
Thank you, found this information useful, and have bookmarked for future reference 🙂
Adam,
Glad you liked it. This blog post was for Babel 5. I have a new post coming soon for Babel 6.
Garrett
Adam,
I finished my blog post about Babel 6 and WebStorm. If you upgrade, you may find it helpful
http://mcculloughwebservices.com/2015/12/10/webstorm-babel-6-plugin/
Garrett
This instruction is just what I needed! In particular Step 3 (on setting up arguments, work directory, and output path). I like the way you output the transpiled files under `/out` – so I can just add this directory to the `.gitignore` file! 🙂
Thanks Johnny! I’m glad it was helpful to you!