Debug NodeJS + ES6 app (Webstorm)

Question

I want to use ES6 at both: client and server side. Of course, I can launch my NodeJS server from terminal like babel-node src/app.js , but it makes it impossible to debug.

On the other hand Webstorm 9 claims it support ES6, but when I try to launch a default Node configuration it complains about the a => a + 1 function.

Question: How do I launch NodeJS + ES6 app from within Webstorm 9?

PS I use Node 0.12.* version PS I also tried this but it also doesn't work for me

Answer 1

I finally got debugging transpiled code with polyfills working in WebStorm, and it's really impressive how well WebStorm works with Babel.

It was pretty easy to follow the directions for configuring a FileWatcher in WebStorm, which automatically transpiles your es6 code: http://babeljs.io/docs/setup/#webstorm

The step that tripped me up was getting node to find the polyfill file, so I could use es6 iterators and generators. The Babel web site says to install Babel and the polyfill globally:

npm install -g babel-es6-polyfill

But when I added in my node program:

require("babel-es6-polyfill");

Node threw an exception about not finding the library. Then I changed the require path to the exact full path:

require("/usr/local/lib/node_modules/babel-es6-polyfill/polyfill.js");

and now I can use the debugger to step through the transpiled code!

Answer 2

You can use the below gulp babel task to compile your es6 files into es5. The generated files will be saved in dist directory. Put a breakpoint in the original es6 file eg. app.js and start a debug session for the generated file ie. dist/app.js (since node can't run es6 files). The breakpoint in the original file will be hit.

var gulp = require('gulp'),
    sourcemaps = require('gulp-sourcemaps'),
    babel = require('gulp-babel'),
    path = require('path'),
    gutil = require('gulp-util');

// Compile ES6 to ES5
gulp.task("babel", function () {
    return gulp.src('**/*.js')
        .pipe(sourcemaps.init())
        .pipe(babel())
        .on('error', gutil.log)
        .pipe(sourcemaps.write('.', {
            includeContent: false,
            sourceRoot: function(file) {
                return path.relative(file.path, __dirname);
            }
        }))
        .pipe(gulp.dest('dist'));
});

Answer 3

Yes, you can. Please follow this link, http://blog.jetbrains.com/webstorm/2015/05/ecmascript-6-in-webstorm-transpiling/ . My take is the full ES6 debug support should be seamless but it is not quite there yet in Webstorm. I'm sure it will get better. The blog provides a workable solution. That said, I would rather debug in node-inspector...and Chrome DevTools for React.

Answer 4

Finally I found the answer here . I did npm install babel and add require('babel/register') at the beginning of my main node file ( app.js ).

Now I really can launch/debug Node app written with ES6 from Webstorm. But that debugging is something very strange - looks like code that worked before doesn't work know. The Intellij debuger says all my variables are undefined. Also there is an article about another possible problems.

Example:

What is supper fancy about it that inside loop for (var i = 1; i < trs.length; i++) { variable i considered undefined !