为什么使用Browserify后仍然包含依赖关系文件

Question

全部：

我对Gulp和Browserify相当陌生，我所做的是转换一些jsx代码并将它们Browserify到一个bundle.js文件中。

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/"));
});

在app.js中,我指定了一些必需依赖项（每个依赖项可能需要一些其他文件），我以为browserify会解析它们并编译成一个bundle.js文件，但当我运行它时，即使我只在index.html页面中包含bundle.js，当我在Chrome source选项卡中查看时，它仍然包含所有那些依赖文件，我想这是Chrome解析bundle文件的特性给我一个依赖文件列表还是它实际上也下载了那些依赖文件（我的困惑是我实际上可以点击并打开那些依赖文件，所以我猜Chrome用bundle.js下载它们，但我不确定）？

谢谢

Answer 1

如果我没理解错的话，您描述的是browserify中的debug:true提供的内容，也就是源映射。

--debug-d启用源映射，允许您单独调试文件。

而且

当opts.debug为true时，向包的末尾内联添加源映射。这使得调试更容易，因为如果您在一个足够现代的浏览器中，您可以看到所有原始文件。