FYI: this post refers to WebStorm 9. Although the same approach should work with WebStorm 10, I found that WebStorm 10 already had a watcher set up for Babel.
So I decided to start working on a project combining Node and Aurelia, kind of a MEAN with Aurelia as the A. I’m coming from a .Net background, so I’m on Windows. I tried out both WebStorm and Sublime and was really drawn to WebStorm based on my familiarity with many of the shortcuts I’ve used forever in ReSharper.
So now I’m using WebStorm and I want to develop using es6. WebStorm comes with a transpiler plugin (basically a file watcher) for Traceur. I’m sure Traceur works great, but Babel has gotten a lot of good reviews and in addition Aurelia uses 6to5 (old Babel) out of the box, so why not stick with the same thing. So I wanted to set up Babel as a custom file watcher in WebStorm…here’s the easy way to do that.
First, install babel via npm:
npm install babel -g
So in order to run a WebStorm command, at least in windows, it has to be an exe, bat, or cmd file. So add a new file to the root of your project and call it “runbabel.cmd” with the following contents:
babel %*
This tells Babel to run with any arguments passed in. Make sure to **not** name the command babel.cmd as it will just call itself in a tight loop instead of calling the Babel CLI.
Now in the main menu, select File –> Settings… From the resulting popup, go to Tools –> File Watchers and click the + button to add a new watcher.
From the resulting modal, set up the watcher with the following settings:
- Name the watcher Babel (or whatever) and give it a description if you like.
- Set the file type to JavaScript files.
- Create a Scope and scope it to the directory containing your source files (in this project, that is src).
- It’s important to set the scope properly because this is the directory that WebStorm watches, which is not necessarily the directory the program will operate on. So initially I set this to be the project directory since the Babel already accepts a directory it should transpile, but I ran into issues because the watcher would get into a tight loop: Babel would output into a project directory which would retrigger the watcher, which would transpile, which would output new files and trigger the watcher again…infinity! For more information on setting up a scope, check out the WebStorm docs on this subject.
- For the Program select the runbabel.cmd that was created earlier, if you have it within your project, you can use the $ProjectFileDir$ macro to locate the command.
- The Arguments can now be any arguments that the Babel CLI accepts. In this case we’re saying that it should run on the src directory and output to the lib directory.
Now just select the Babel watcher you created…and let it rip!
Next, we’ll talk about how to set up the transpiler using gulp instead of a file watcher.
EricSwann.net 