2

I use watchify/ browserify to create a bundle with debug source maps with this command- 

watchify main.js -o bundle.js -v -d

When I use Chrome DevTools to debug the resulting app, the source files are accessible in their orginal nested folder locations, visible in DevTools' Sources panel.

enter image description here

However when I run it through reactify with this command-

watchify main.js -t reactify -o bundle.js -v -d

Chrome DevTools shows all the source files in the same folder as bundle.js and the file name includes the full local path name.

enter image description here

I am finding this annoying and hard to identify the correct file both in the sources panel and in the individual tabs as the file is too long to display.

Does anyone know how to get around this so that the source files display in their original folder locations (as per pic 1). Thx

Dave Pile
  • 5,559
  • 3
  • 34
  • 49
  • An update on this. I did use Dom's answer below and (I am sure) it worked for me at the time but now I am unable to repeat that success. In the end I used webpack and it does exactly what I want (plus more). There was a little bit of extra work in setting it up and getting it to work but it wasnt too much and I think it was worth it. This tutorial was very helpful in getting something up and running that I could build on for my own project- http://jslog.com/2014/10/02/react-with-webpack-part-1/ – Dave Pile May 30 '15 at 01:27

1 Answers1

2

You need specify the --full-paths option for browserify as false

See: https://github.com/substack/node-browserify#usage

watchify main.js -t reactify -o bundle.js -v -d --full-paths=false
Dave Pile
  • 5,559
  • 3
  • 34
  • 49
Dom
  • 36
  • 3
  • 1
    Would you mind posting and example of the command I would use to do this. I have tried numerous times and cannot get any different outcome. (The commands I am using are in the original question). Thanks – Dave Pile May 14 '15 at 23:31
  • `watchify main.js -t reactify -o bundle.js -v -d --full-paths=false` ? – Dom May 18 '15 at 18:53
  • 1
    Thanks! You would not believe the number of times I tried this with and without other options, inside browserify options in package.json etc. etc. But I omitted the equals sign on the command line in `--full-paths=false` duh! (Not sure why browserify options in package.json didnt work as I did `"browserify": { "transform": [ "reactify" ], "full-paths": false } `. Anyway, thanks a lot – Dave Pile May 18 '15 at 23:25