I am using Browserify with one transform method: reactify. Here is how I build my scripts:
gulp.task('scripts', function() {
var b = null, watcher = null;
function bundle() {
return b
.on('error', function(err) { console.error(err) })
.bundle()
.pipe(source('bundle.js'))
.pipe(gulp.dest('dest/scripts'));
}
b = browserify({
debug: true,
entries: ['app/index.jsx'],
transform: [ reactify ],
extensions: [ '.jsx' ],
cache: {}, packageCache: {}, fullPaths: true
});
if (config.watch) {
b = watchify(b);
b.on('update', bundle);
}
return bundle();
});
When running the app locally I the source maps are correct and in the dev tools I can see the original jsx file.
This problem starts when I add another transform. Then when running and looking in dev tools, I don't get the original file. Instead I get the jsx files AFTER compilation. I tried that with es6ify, uglifyfy and envify (reactify + es6ify, reactify + uglifyfy, reactify + envify) and I get the same incorrect behavior.
It has to be something wrong I do with the source maps configuration or a bug in browserify.
Any idea how to fix it?