2015-09-10 10 views
6

Beim Versuch, Angular (1.x) mit Systemjs zu arbeiten, erkannte ich, dass es derzeit nicht die Fähigkeit gibt, $inject in Winkelkomponenten automatisch einzufügen, was die Komponenten auch bei den Argumenten für die Funktionen funktionsfähig hält sind vom Minifier verstümmelt. Das manuelle Erstellen der $inject Annotationen ist mühsam, fehleranfällig und verstößt gegen den Principal DRY.Können SystemJS-Plugins bereits transpilierte Dateien modifizieren?

Es gibt ein ausgereiftes npm-Modul namens ng-annotate, das dieses Problem löst und in vielen ähnlichen Situationen zum Bündeln verwendet wird. Als ich SystemJS erkundete, sehe ich, dass es ein Plugin-System gibt, das die Fähigkeit enthält, Quellcode zu übersetzen, was genau das ist, was ng-annotate tut.

Von dem, was ich sehen kann, gibt Ihnen SystemJS jedoch nur die Möglichkeit, eine bestimmte Dateierweiterung einem einzelnen Loader zuzuordnen, und alle Beispiele der Plugins unterstützen einen neuen Dateityp. Ich möchte die Ausgabe des SystemJS-Übertragungsprozesses nachbearbeiten, anstatt einen neuen Dateityp hinzuzufügen. Es scheint, als ob SystemJS in der Lage wäre, dies zu tun, da es eine Verarbeitungspipeline hat, aber ich kann nicht richtig herausfinden, wie ich es richtig anhängen kann. Momentan benutze ich Browserify, um den gleichen Effekt zu erzielen, aber ich bin mit einer ziemlich komplexen Reihe von Build-Aufgaben gelandet und möchte sie, wenn möglich, mit SystemJS vereinfachen.

Andere Strategien, um ng-annotate in der Lader-Pipeline mit SystemJS verwenden zu können, wären ebenfalls zu begrüßen.

+0

Warum verwenden Sie keine Inline-Array-Annotation? –

+0

Weil die Art von Code, die ich schreibe, nicht förderlich ist. Ich schreibe in Typescript, wo die meisten meiner Dienste als Klassen enden und ich meine Dienste mit dem Modul in einer separaten Datei registrieren, nicht in der gleichen Datei wie der Dienst. Auch, wie bei '$ inject', verstößt es gegen * DRY *. Schließlich ist eckig nicht das primäre Thema der Frage. –

Antwort

2

Irgendwann habe ich einen Weg gefunden, aber das fühlt sich wirklich klobig an. System.src selbst verwendet eine hook() Funktion, um dies zu tun, aber es wird nicht zur Verwendung exportiert. Ich wäre dankbar für alle Möglichkeiten, dies zu verbessern, und ich hoffe, schließlich ein richtig unterstützt Mechanismus für die Verkettung Loader-Funktionalität zur Verfügung steht:

var System = require('systemjs'); 
 
var systemTranslate = System.translate; 
 
System.translate = function(load) { 
 
    return systemTranslate.call(this, load).then(function (result) { 
 
    if (result) { 
 
     var processedResult = result; // Do your processing here. 
 
     load.source = processedResult; 
 
    } 
 
    return load.source; 
 
    }); 
 
}

Ich habe nicht viel mit diesem experimentiert, da meinem Bestimmte Anwendungsfälle für das Erstellen von System.js sind derzeit eine Sackgasse (Typescript-Quellen - Maps sind immer noch gesperrt), aber vermutlich können Sie auch ein Versprechen zurückgeben.

Ich werde diese Antwort für eine Weile nicht gewählt lassen, um zu sehen, ob jemand einen besseren Rat hat.