一种缩小或丑化ES6模板字符串的方法

Question

就像是

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

会产生:

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

我需要的是摆脱额外的空间和可能的换行符,就像所有其他html缩小工具一样.

所以它应该变得类似于:

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

有没有什么方法能够明智地实现这一目标并且坚不可摧？

Answer 1

最好的方法可能是使用标记模板，例如

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

你可以从

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

这与没有标签的情况基本相同。

现在您可以扩展它以parts动态缩小模板的 ，以便tpl成为预期的字符串。

下一步是将其作为编译管道中的静态优化引入。弄清楚如何编写与 AST 中标记的模板表达式匹配的规则，其中标记是标识符minifyHTML，然后评估您的缩小作为将 ES6/TypeScript 源编译/捆绑到分发文件的一部分。