配置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所返回的相同捆綁器。