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返回的相同捆绑包。

配置watchify和browserify以仅重新运行所需的文件

1 个答案: