Как отлаживать react.js с форматами файлов .jsx в PHPStorm/WebStorm/IntelliJ IDEA?

Question

[LB777]

Современные методы фрондэнд разработки предъявляют требования к js файлам, что бы они были все сконкотенированы и сминифицированны. Но процесс разработки требует, что бы все было разложено в разных файлах и папках. Поэтому приходиться js файлы для продакшена кокатенировать и минифицировать гальпом (или т.п. средствами). Но остаёться вопрос отлатки.
Если отладка для обычных js файлов в PHPStorm/WebStorm/IntelliJ IDEA мне понятна, то с отладкой реактовских файлов .jsx возникают проблема.
На данный момент у меня сделана гальповская сборка

var gulp                   = require('gulp');
var sourcemaps       = require('gulp-sourcemaps');
var react                  = require('gulp-react');
var uglify 			                = require('gulp-uglify');
var concat               = require('gulp-concat');

gulp.task('react', function(){
    return gulp.src('www/js/reactjs/*.jsx')
        		.pipe(sourcemaps.init())
        .pipe(react())
        .pipe(concat('main.js'))
        .pipe(sourcemaps.write('../maps'))
        .pipe(gulp.dest('www/js/'));
});

При таком подходе ide отлавливает брекпоинты. Но если в эту сборку добавить сжатие .pipe(uglify()) , то source maps подставляет не исходные .jsx, а уже сконкотенированный, но не сжатый файл main.js.
Как сделать так, что бы файлы конкотенировась, сжимались, но при этом source maps подставлял и позволял дебажить в PHPStorm/WebStorm/IntelliJ IDEA исходные .jsx файлы?
P.S.: В данном случае расширение .jsx или .js не имеет значение и суть проблемы от этого не меняется. Я использую .jsx для наглядности того, что там используется JSX формат данных.

Answer 1

[LB777]

Решение получил благодаря Browserify.
В gulpfile.js пишем следующие:

var gulp             = require('gulp');
var browserify       = require('browserify');
var reactify         = require('reactify');
var source           = require('vinyl-source-stream');
var buffer           = require('vinyl-buffer');
var sourcemaps       = require('gulp-sourcemaps');
var uglify 			          = require('gulp-uglify');

gulp.task('react', function(){
    return browserify('./www/js/react/app.jsx', { debug: true })
        .transform(reactify)
        .bundle()
        .pipe(source('main.min.js'))
        .pipe(buffer())
        .pipe(sourcemaps.init({loadMaps: true}))
        .pipe(uglify())
        .pipe(sourcemaps.write('../maps'))
        .pipe(gulp.dest('./www/js/'));
});

После этого надо запустить дебаг в PHPStorm/WebStorm/IntelliJ IDEA , перейти во вкладку 'Scripts' , найти там исходные файлы (у меня они лежали по адресу react.zz/source/www/js/*.jsx), по нужному файлу кликнуть правой клавишей мыши и в появившемся меню выбрать "Specify Local Path..."
Теперь брекпоинты будут подбрасываться и проект будет удобно дебажить.

Comments

[LB777]

Ещё найти решение данной задачи помог этот вопрос stackoverflow.com/questions/28087674/gulp-browseri...

Answer 2

[Андрей Антропов]

Например для сборки можно использовать Browserify или Webpack, который для проектов на реакте более предпочтителен, так как поддерживает горячую замену обновленных модулей и конечно же оба они поддерживают создание sourcemap

Comments

[LB777]

Спасибо, буду разбираться.

[LB777]

Андрей Антропов: Благодаря Browserify нашел решение для своей задачи и описал его как ответ к своему вопросу. Спасибо ;)