配置watchify和browserify
我开始研究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))
});
我发现这个答案来访问依赖列表，但它需要手工构建一个依赖关系树，将其存储在某个地方并在每次构建触发时更新它。 有更好的解决方案吗？
为了让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方法包装watchify打包器，并通过用于确定需要监视哪些文件的options提供一些共享参数。 它返回将被返回的相同捆绑browserify 。