Source maps using Gulp, Browserify, Babel, ES6 and React

Question

I use Gulp with Browserify and Babelify to forward ES6 and JSX-React. Despite numerous online examples, I can't figure out how to create source maps that point to the original pre-bundled ES6 / JSX files.

Here is my current browser Gulp task, which is based on this example :

gulp.task('browserify', function() {
  browserify({ entries: './src/js/main.jsx', extensions: ['.jsx'], debug: true })
    .transform(babelify, {presets: ["es2015", "react"]})
    .bundle()
    .pipe(source('main.js'))
    .pipe(buffer())
    .pipe(sourcemaps.init({loadMaps: true}))
    .pipe(sourcemaps.write('./'))
    .pipe(gulp.dest('dist/js'));
});

All this creates a file main.js.mapthat seems to have the same content as the linked file main.js. In Chrome, it looks like this:

But I want to debug the original source files .jsxand .js(with the syntax ES6). They look like this in my IDE:

How can i do this?

Answer 1

sourcemaps: true babelify

{presets: ["es2015", "react"],sourcemaps:true}

Answer 2

webpack.config.js

{ 
    devtool: 'source-map', // Or some other option that generates the original source as seen from https://webpack.imtqy.com/docs/configuration.html#devtool
    ...
}

sourceMap Babel Loader, devtool Webpack.