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

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