配置watchify和browserify僅重新運行所需的文件

Question

我開始研究Chrome擴展程序。 到目前為止，我使用gulp設置了項目，以查看包含背景，彈出窗口，內容和其他一些頁面的代碼的文件夾。 每個組件與其他組件共享一些代碼。

問題在於每次我編輯文件時，ifyify都會觸發完全重建。

我試圖將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))
});

我已經找到此答案來訪問依賴項列表，但是它需要手工構建一個依賴關系樹，將其存儲在某個位置，並在每次觸發構建時對其進行更新。 有更好的解決方案嗎？

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 。