Отладка скомпилированного приложения ES6 nodejs в WebStorm

Я хочу отладить приложение node, которое выполняется из babel скомпилированных файлов ES6. У меня есть источник ES6 в папке src и эквивалент babel ES5 в папке build.

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

Моя цель: Разместить точки останова непосредственно в моем источнике ES6.

Я создал правильные исходные карты, и я создал конфигурацию отладки node, которая запускает основной файл ES5 с корнем проекта, установленным как рабочий каталог. Я могу сломаться, когда я установил точки останова в скомпилированных файлах ES5, и он автоматически отображает мой источник ES6.

Однако я бы хотел разместить точки останова непосредственно в источнике ES6.

Возможно ли это?

2015-10-11 edit <

Сопоставление источников теперь отлично работает с @mockaroodev config, когда я использую абсолютный sourceRoot!

Однако отладка все еще сломана: переключение по строке иногда приводит меня в неожиданные места. Похоже, что когда строка подразумевает не-внутреннюю (не родную) require в некотором роде, отладчик будет разбиваться в конце требуемого содержимого. Что ужасно раздражает!

Я использую Webstorm 10.0.4 на linux и обновил как babel, так и sourcemaps до последних версий.

Кто-нибудь также встречает эту проблему?

Ответ 1

Начиная с WebStorm 2016.2 EAP, вам не нужны никакие сопоставления источников или даже наблюдатели файлов. Просто сконфигурируйте исполняемый файл "node" как babel- node, и вы можете отлаживать свой контент, даже скрипты, содержащие async/await.

Ответ 2

Решение

@mockaroodev будет работать, только если у вас есть плоская иерархия в источнике. Если у вас есть источники в разных подпути, для параметра sourceRoot рекомендуется использовать абсолютный путь (от корня домена), указывающий на корень исходного файла.

Обновление gulp задачи 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'));
});

Ответ 3

В системе билетной системы Jetbrains возникла проблема. Я думаю, что эта проблема решена. Также см. Соответствующую проблему GitHub в репозитории Babel.

Существует пример примера на блоге Jetbrains, в основном устанавливающий флаги для бабелей, такие как --source-maps.

Ответ 4

Да, можно положить точки останова в свой код ES6 с помощью WebStorm. Для того, чтобы точки останова работали, вам нужно создать исходные карты. Я использую 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'))

Обратите внимание, что дополнительные параметры includeContent и sourceRoot для sourcemaps.write являются критическими. По умолчанию gulp -sourcemaps добавляет ошибочный sourceRoot: source в каждый файл js.map. Эти дополнительные параметры исправляют эту проблему.