How to debug react.js with .jsx file formats in PHPStorm/WebStorm/IntelliJ IDEA?

Question

IntelliJ IDEA

Modern front-end development methods require js files to be all concatenated and minified. But the development process requires that everything be spread out in different files and folders. Therefore, you have to cocatenate and minify js files for production with a gallop (or similar means). But the issue of debugging remains.
If debugging for regular js files in PHPStorm/WebStorm/IntelliJ IDEA is clear to me, then there is a problem with debugging React .jsx files.
At the moment, I have made a Galpov assembly

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

With this approach, ide catches breakpoints. But if .pipe(uglify()) compression is added to this assembly, then source maps substitutes not the original .jsx, but the already concatenated, but not compressed main.js file.
How to make files concatenated, compressed, but at the same time source maps substitutes and allows debugging source .jsx files in PHPStorm/WebStorm/IntelliJ IDEA?
PS: In this case, the extension .jsx or .js does not matter and the essence of the problem does not change from this. I use .jsx to show that it uses JSX data format.

Answer 1

I got the solution thanks to Browserify.
In gulpfile.js we write the following:

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

After that, you need to start debugging in PHPStorm/WebStorm/IntelliJ IDEA , go to the 'Scripts' tab, find the source files there (I had them at react.zz/source/www/js/*.jsx ), click on the desired file right-click and select "Specify Local Path..." in the menu that appears.
Now the breakpoints will be thrown up and the project will be conveniently debugged.

Answer 2

For example, you can use Browserify or Webpack for assembly , which is more preferable for react projects, as it supports hot replacement of updated modules and of course both of them support sourcemap creation