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?

Like many before me, I switched to WebPack and got it working immediately. — Aaron Beall
– Aaron Beall, Commented Nov 28, 2015 at 22:49

Nir · Accepted Answer · 2015-12-28 19:39:33Z

2

Add sourcemaps:true to babelify options

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

answered Dec 28, 2015 at 19:39

Nir

3281 gold badge4 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Aaron Beall Over a year ago

Thanks, I want to say I tried this and it made no difference, but I've since switched to WebPack which was much easier to get working, so unfortunately I can't verify this answer right now.

Yangshun Tay · Accepted Answer · 2017-01-28 15:41:51Z

0

I simply had to change the settings in webpack.config.js

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

You don't have to modify the sourceMap query param in Babel Loader because it is inferred from the devtool option of the Webpack config.

edited Jan 28, 2017 at 15:41

answered Jan 23, 2017 at 9:39

Yangshun Tay

53.7k34 gold badges126 silver badges150 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related