Why dependency files still included after using Browserify

Question

All:

I am pretty to new to Gulp and Browserify, what I did is transpile some jsx code and browserify them into a bundle.js file.

var gulp = require("gulp");
var browserify = require("browserify");
var source = require("vinyl-source-stream");
var reactify = require("reactify");

gulp.task("default", function(){
    browserify({
        entries: ["js/app.js"],
        debug: true
    })
    .transform(reactify)
    .bundle()
    .pipe(source("bundle.js"))
    .pipe(gulp.dest("dist/js/"));
});

In app.js, I specify a few require dependencies(each one may require some other file), and I thought browserify will parse them and compile into a single bundle.js file, but when I run it, even I only include bundle.js in index.html page, it still includes all those dependency files when I check in Chrome source tab, I wonder if this is just Chrome's feature to parse bundle file which gives me a list of dependency file list or it actually download those dependency files as well( My confuse is I actually can click and open those dependency files, so I guess Chrome download them all with bundle.js, but I am not sure about that)?

Thanks

Lim H. Lim H. · Accepted Answer · 2015-10-03T15:25:13

If I understand you correctly, you are describing what debug: true in browserify gives you, aka source maps.

--debug -d Enable source maps that allow you to debug your files separately.

and

When opts.debug is true, add a source map inline to the end of the bundle. This makes debugging easier because you can see all the original files if you are in a modern enough browser.

Why dependency files still included after using Browserify

1 Answers