How to get a dependency tree in a browser?

Question

Is there a way to get the dependency tree that the browser uses to create the package?

Browserify takes a bunch of scripts and makes a good set of them, resolving all the required dependencies. But I want to see the structure of these dependencies.

var scripts = [ 'a.js', 'b.js' ];//a & b require a lot of other scripts var b = browserify({ entries:scripts }); b.bundle().pipe(fs.createWriteStream('bundle.js')); //looking on b in debugger I can't find anything like dependency tree 

Answer 1

This code, cut from the --list handler in the Browserify bin/cmd.js script , will provide you with a flat list of files:

 // Your setup: var scripts = [ 'a.js', 'b.js' ]; //a & b require a lot of other scripts var b = browserify({ entries: scripts }); // Logging out each of the filenames: b.pipeline.get('deps').push(require('through2').obj( function (row, enc, next) { console.log(row.file || row.id); next(); } )); // Bundle as normal: b.bundle().pipe(fs.createWriteStream('bundle.js')); 

(Note: you will need through2 package installed for the above to work out of the box.)

The tree can be built using the code from the --deps handler next to it , but all this code displays a list of JSON drops, each of which contains a list of other files on which it depends; you need to build a tree yourself.

Answer 2

I'm not sure if there are equivalent API methods, but you can try the CLI flags --deps and --list .