Getting ES6 to work in WebStorm

Question

Any ideas on how to use ES6 on WebStorm 10?

Here's what I have done so far:

1. Installed Babel.
2. Activated Babel with Settings > Tools > File watchers. checked Babel checkbox.
3. Edit configurations > Before launch file watchers > + then 'Run File Watchers".
4. Set code as ES6
5. Changed my run configuration to use the compiled version.

Then created the following trivial piece of code:

require("babel/register");
function* count(n){
    console.log(n);
}

This code shows up with no syntax errors, as it should. (A convenient way to make sure ES6 is turned on).

Run it (run the compiled version, actually), and get this ....

var marked0$0 = [count].map(regeneratorRuntime.mark);
                            ^
ReferenceError: regeneratorRuntime is not defined

Why? How do I get it to precompile with Babel and then run? Isn't the regenerator supposed to be taken care of with this line:

require("babel/register");

(Windows 7, if that is important).

Answer 1

I think there are two things you probably need to do to make it work based on the nature of the error you're describing.

1. npm install babel-core
2. add --optional runtime as an argument to the invocation of babel

This is based on what's described in some detail here.

Answer 2

The "require hook" only works on files that you require after registering it, but not on the file that registers the hook itself.

So this works:

// index.js
require('babel/register');
require('./count');

// count.js
function* count(n){
  console.log(n);
};

Answer 3

Babel's require hook requires you to have BABEL_CACHE_PATH environment variable. You might need to specify them as well in your File Watcher configuration in WebStorm.