配置watchify和browserify以仅重新运行所需的文件

Question

我开始研究chrome扩展。 到目前为止，我使用gulp来设置项目来观察包含背景，弹出窗口，内容和一些其他页面的代码的文件夹。 每个组件与其他组件共享一些代码。

问题是，我每次编辑文件watchify都会触发完全重建。

我试图限制browserify过程只处理已更改的文件。它适用于根脚本（popup.js，background.js，content.js）... 但不幸的是，我无法跟踪依赖项（根脚本或其依赖项所需的文件），并且此策略在依赖项被编辑。

所以，这里是我的问题是否有一个很好的策略，在改变时自动更新任何相关脚本，同时避免对整个树进行完整浏览？

gulp.task('babel',() => { 
    buildingTasks.start('babel'); 
    return gulp.src(scriptSrc) 
    .pipe(through2.obj(function (file, enc, next){ 
    var b = browserify(file.path, { 
     debug: (process.env.NODE_ENV === 'development') 
    }); 
    b.transform(babelify, {presets: ['es2015', 'react']}); 
    b.bundle(function(err, res){ 
     if (err) return next(err); 
     file.contents = res; 
     next(null, file); 
    }); 
    })) 
    .pipe(sourcemaps.init({loadMaps: true})) 
    .pipe(sourcemaps.write('map')) 
    .pipe(gulp.dest(scriptDest)) 
}); 

我发现this answer访问依存列表，但它需要手工建立依赖关系树，存储它的地方，每一个构建被触发时更新它。有更好的解决方案吗？

Answer 1

对于Browserify观看捆绑的文件，你需要配置Watchify：

var browserify = require('browserify'); 
var watchify = require('watchify'); 

... 

var options = Object.assign({}, watchify.args, { 
    debug: (process.env.NODE_ENV === 'development') 
}); 
var b = watchify(browserify(file.path, options)); 

的watchify方法包裹Browserify捆绑，并提供通过options一些共同的论点被用于确定哪些文件需要被监视。它将返回browserify所返回的相同捆绑器。