Source Maps with Gulp, Browserify, Babel, ES6, and React

Question

I am using Gulp with Browserify, and Babelify for ES6 and JSX-React transpiling. Despite numerous examples online, I can't figure out how to generate source-maps that point to the original pre-transpiled ES6/JSX files.

Here is my current gulp browserify 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 does is create a main.js.map file that seems to have the exact same content as the bundled main.js file. In Chrome it looks like this:

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

How can I do this?

Answer 1

Add sourcemaps:true to babelify options

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