Un modo per minify o uglify ES6 Stringhe modello

Question

Qualcosa di simile

var tpl = ` 
<div> 
    template 
    <span>string</span> 
</div> 
` 

produrrà:

var tpl = "\n<div> \n template\n <span>string</span>\n</div>\n"; 

cosa ho bisogno è di sbarazzarsi di spazi aggiuntivi e forse interruzioni di linea, come tutti gli altri html strumenti di minificazione fanno.

Così dovrebbe diventare simile a:

"<div>template<span>string</span></div>" 

ci sono modi per raggiungere questo obiettivo con saggezza e indistruttibile?

Answer 1

L'approccio migliore è probabilmente utilizza un modello con tag, come

var tpl = minifyHTML ` 
<div> 
    template 
    <span>string</span> 
</div> 
`; 

Si può iniziare con

function minifyHTML(parts, ...values) { 
    var out = []; 
    out.push(parts[0]); 
    for (var i = 1; i<parts.length; i++) 
     out.push(parts[i], String(arguments[i])); 
    return out.join(""); 
} 

che è fondamentalmente lo stesso come con nessun tag.

Ora è possibile estenderlo per minimizzare lo parts del modello in modo dinamico, in modo che lo tpl diventi la stringa prevista.

Il passaggio successivo consiste nell'introdurlo come ottimizzazione statica nella pipeline di compilazione. Scopri come scrivere una regola che corrisponda alle espressioni del modello con tag nell'AST in cui il tag è l'identificatore minifyHTML, quindi valuta il tuo minification come parte della compilazione/associazione della sorgente ES6/TypeScript ai file distribuiti.