在WebStorm中debugging编译ES6 nodejs应用程序

我想debugging一个从babel编译的ES6文件运行的节点应用程序。 我有一个src文件夹中的ES6源代码和buildel文件夹中的babel ES5等价物。

 Project root | | build | > ES5 Compiled files | | src | > ES6 Source files 

我的目标：直接在我的ES6源代码中放置断点。

我已经生成了适当的源映射，并且我创build了一个节点debuggingconfiguration，该configuration运行ES5主文件，并将项目根设置为工作目录。 当我在ES5编译文件中设置断点时，可以中断，并自动显示我的ES6源代码。

不过，我想直接在ES6源代码中放置断点 。

这甚至可能吗？

–

> 2015-10-11编辑<

当我使用绝对的sourceRoot时，源映射现在可以在@ mockaroodev的configuration下 sourceRoot ！

然而 ，debugging仍然是打破：有时候会把我带到意想不到的地方。 似乎当该行暗含非内部（非本地） require时，debugging器将在所需内容结束时中断。 这是非常烦人的！

我在Linux上使用Webstorm 10.0.4，并将babel和sourcemaps升级到最新版本。

有人也遇到这个问题吗？

Answer 1

截至WebStorm 2016.2 EAP，你不需要任何源映射，甚至不需要文件观察者。 简单地将你的“node”可执行文件configuration成babel-node，你可以debugging你的内容，甚至包含async / await的脚本。

Answer 2

只有在源代码中具有扁平层次结构时，@ mockaroodev解决scheme才能起作用。 如果源中包含不同的子path，则build议sourceRoot选项使用指向源文件根的绝对path（来自域根）。

更新的大嘴巴babel任务：

 var gulp = require('gulp'), sourcemaps = require('gulp-sourcemaps'), babel = require('gulp-babel'), gutil = require('gulp-util'), path = require('path'); // 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

Jetbrains的售票系统中存在这个问题。 我觉得这个问题已经解决了。 另请参阅Babel回购中相应的GitHub 问题。

在Jetbrains的博客上有一个示例设置 ，基本上设置了babel标志，例如我们--source-maps 。

Answer 4

是的，可以使用WebStorm将断点放入ES6代码中。 为了使断点工作，你需要生成源地图。 我使用gulp-babel和gulp-sourcemaps来编译es6，使用下面的gulp任务：

 var gulp = require('gulp'); var sourcemaps = require('gulp-sourcemaps'); var babel = require('gulp-babel'); var gutil = require('gulp-util'); gulp.src(['src/**/*.es6']) .pipe(sourcemaps.init()) .pipe(babel()) .on('error', gutil.log) .pipe(sourcemaps.write('.', { includeContent: false, sourceRoot: '../src' })) .pipe(gulp.dest('lib')) 

请注意，sourcemaps.write的额外includeContent和sourceRoot选项至关重要。 默认情况下，gulp-sourcemaps为每个js.map文件添加一个错误的sourceRoot：source。 这些额外的选项纠正这个问题。