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?

P.S. I use Node 0.12.* version P.S. 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'));
});