配置 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 提供一些共享参数，用于确定需要监视哪些文件。它 returns 与 browserify.

返回的相同的捆绑器

配置 watchify 和 browserify 以重新运行只需要的文件

Configuring watchify and browserify to re-run only the required files

javascript

performance

browserify

gulp

配置 watchify 和 browserify 以重新 运行 只需要的文件

Configuring watchify and browserify to re-run only the required files

javascript

performance

browserify

gulp

配置 watchify 和 browserify 以重新运行只需要的文件