javascript - 一种缩小或丑化 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 中的标记模板表达式，其中标记是 identifier minifyHTML，然后在将 ES6/TypeScript 源编译/捆绑到分布式文件的过程中评估您的缩小。