2015-08-19 6 views
5

şey gibi ES6 Şablon Dizeler küçültmek veya çirkinleştirmek için bir yol:</p> <pre><code>var tpl = ` <div> template <span>string</span> </div> ` </code></pre> <p>üretecektir

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

Ne gereken tüm diğer html gibi, fazladan boşluklar ve belki satır sonları kurtulmak için kıymetlendirme araçları.

Yani benzer hale olmalıdır:

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

Bunu başarmak için herhangi bir yolu akıllıca ve yıkılmaz var mı?

+0

regex yerine \ r \ n veya \ n, \ s +, \ t + '\ n', '\ s', '\ t' – Raghavendra

+4

Ancak bu küçültme, programınızı ve sayfanızın görünümünü değiştirir (açıklıktan önce boşluk belirtin) ?! Bunu açık bir açıklama olmadan yapmak için aklı başında bir yol yoktur, ve o zaman sadece bir dizi işlem sorunudur. – Bergi

+0

Transpiler kullanıyor musunuz? – Bergi

cevap

4

iyi yaklaşım muhtemelen Temelde hiçbir etiketiyle aynıdır

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

ile başlayabilirsiniz

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

gibi etiketli bir şablon kullanıyor.

Şimdi, bu şablonun parts değerini dinamik olarak küçültmek için genişletebilirsiniz, böylece tpl beklenen dizge haline gelir.

Bir sonraki adım, derleme boru hattınızda bunu statik bir optimizasyon olarak tanıtmaktır. Etiketin tanımlayıcı minifyHTML olduğu AST'deki etiketli şablon ifadeleriyle eşleşen bir kuralın nasıl yazılacağını belirleyin ve ardından da, paylaştırılmış dosyalara ES6/TypeScript kaynağını derleme/paketlemenin bir parçası olarak değerlendirin.

İlgili konular