Konfigurieren von watchify und browserify, um nur die erforderlichen Dateien erneut zu starten

Question

Ich begann mit der Arbeit an einer Chrome-Erweiterung. Bisher habe ich das Projekt mit Hilfe von Schluck eingerichtet, um den Ordner mit dem Code für Hintergrund, Popup, Inhalt und ein paar andere Seiten zu sehen. Jede Komponente teilt einige Code mit den anderen.

Das Problem ist, dass jedes Mal, wenn ich eine Datei bearbeiten watchify eine vollständige Neuerstellung auslösen wird.

Ich habe versucht, den browserify-Prozess zu beschränken, um nur die Dateien zu bearbeiten, die geändert wurden. Es funktioniert sehr gut für root-Skripte (popup.js, background.js, content.js) ... Aber leider habe ich keine Möglichkeit, Abhängigkeiten zu verfolgen (Dateien von den root-Skripten oder deren Abhängigkeiten erforderlich) und diese Strategie schlägt fehl, wenn a Abhängigkeit wird bearbeitet.

Also hier ist meine Frage gibt es eine gute Strategie, jedes abhängige Skript bei Änderung automatisch zu aktualisieren, während eine vollständige browserify des gesamten Baumes zu vermeiden?

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)) 
}); 

habe ich this answer für den Zugriff auf die Abhängigkeitsliste gefunden, aber es würde eine Abhängigkeitsbaum von Hand bauen, es irgendwo zu speichern und es jedes Mal, wenn ein Build ausgelöst wird, zu aktualisieren. Gibt es eine bessere Lösung?

Answer 1

Für Browserify die gebündelten Dateien zu sehen, müssen Sie Watchify konfigurieren:

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)); 

Die watchify Methoden wickeln die Browserify Bündler und bietet einige freigegebene Argumente über options, die verwendet werden, um zu bestimmen, welche Dateien beobachtet werden müssen . Es gibt denselben Bundler zurück, der von browserify zurückgegeben wurde.