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

Answer 1

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 2

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 3

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!

Answer 4

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'));
});