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

【问题标题】：A way to minify or uglify ES6 Template Strings一种缩小或丑化 ES6 模板字符串的方法
【发布时间】：2015-11-12 21:41:39
【问题描述】：

类似

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>"

有没有什么方法可以明智且坚不可摧？

【问题讨论】：

使用正则表达式替换 \r\n 或 \n, \s+, \t+ 为 '\n', '\s', '\t'
但是这个缩小确实会改变你的程序和页面的外观（注意 span 之前的空格）？！没有明确的注释就没有理智的方法可以做到这一点，然后这只是字符串处理的问题。
你在使用转译器吗？
我正在使用 TypeScript，但我认为这不是转译器的问题。当然，它可能是一个处理字符串的函数，它会删除空格（可能无法确定哪些是真正的空格，哪些不是）和换行符。我只是在寻找最聪明的方法来实现它。
如果这是一个文件大小问题，那么 gzip 可以很好地压缩所有空格和换行符，冗余根本就无关紧要。

标签： javascript ecmascript-6 template-strings

【解决方案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 源编译/捆绑到分布式文件的过程中评估您的缩小。

【讨论】：