javascript - 配置 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 bundler ，并通过 options 提供一些共享参数，用于确定需要监视哪些文件。它返回的 bundler 与 browserify 返回的 bundler 相同。