2015-09-10 5 views
6

Durante il tentativo di ottenere Angular (1.x) lavorando con systemjs mi sono reso conto che non esiste al momento la capacità (che io sappia) di inserire automaticamente $inject in componenti angolari, il che mantiene i componenti funzionanti anche quando gli argomenti delle funzioni sono maciullati dal minificatore. La creazione manuale delle annotazioni $inject è noiosa, soggetta a errori e viola il principal DRY.I plugin SystemJS possono modificare i file già transpiled?

C'è un modulo npm maturo chiamato ng-annotate che risolve questo problema e viene utilizzato in molte situazioni simili per il raggruppamento. Come ho esplorato SystemJS, vedo che esiste un sistema di plugin che include la possibilità di tradurre il codice sorgente, che è esattamente ciò che fa ng-annotate.

Da quello che posso vedere, però, SystemJS ti dà solo la possibilità di mappare una particolare estensione di file su un singolo caricatore e tutti gli esempi dei plugin sono per supportare un nuovo tipo di file. Quello che mi piacerebbe fare è post-processare l'output del processo di transpilation di SystemJS piuttosto che aggiungere un nuovo tipo di file. Sembra che SystemJS dovrebbe essere in grado di farlo poiché ha una pipeline di elaborazione, ma non riesco a capire come collegarlo nel modo giusto. In questo momento sto usando Browserify per ottenere lo stesso effetto, ma ho finito con un insieme piuttosto complesso di attività di compilazione e, se possibile, vorrei semplificarlo con SystemJS.

Anche le altre strategie per poter utilizzare ng-annotate nella pipeline del caricatore con SystemJS.

+0

Perché non si utilizza l'annotazione dell'array in linea? –

+0

Perché lo stile del codice che sto scrivendo non è favorevole ad esso. Scrivo in Typescript dove gran parte dei miei servizi finiscono come classi e registro i miei servizi con il modulo in un file separato, non nello stesso file del servizio. Inoltre, come con '$ inject' viola * DRY *. Infine, l'angolare non è l'argomento principale della domanda. –

risposta

2

Alla fine ho trovato un modo, ma questo sembra davvero goffo. Lo stesso System.src utilizza una funzione hook(), ma non viene esportato per l'uso. Sarei grato per eventuali modi per migliorare questo e spero che alla fine un meccanismo adeguatamente supportato per il concatenamento funzionalità caricatore venga a conoscenza:

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

non ho sperimentato molto con questo, dato che il mio casi d'uso particolari per la costruzione di System.js sono attualmente un vicolo cieco (le mappe-sorgente di Typescript sono ancora state sballate), ma presumibilmente puoi anche restituire una promessa.

Lascerò questa risposta non scelta per un po 'per vedere se qualcuno ha qualche consiglio migliore.