javascript - 如何避免 UglifyJS 在通过 html-minifier 忽略 Handlebars 占位符后添加额外的分号

Question

我正在使用Html-Minifier-Terser通过 Gulp 在 express JS 应用程序中预先缩小一些 Handlebars (HBS) 模板。Html-Minifier 使用Terser (原为UglifyJS ) 作为minifyJS选项。

为了防止 Html-Minifier 破坏 HBS 块，我使用了推荐的忽略自定义片段的方法，这似乎工作正常。

ignoreCustomFragments: [ /{{[\s\S]*?}}/ ]

但是，当也打开 JS 缩小时，我发现脚本标签中的 HBS 条件语句不是内联的（在一行中），在每个被忽略的片段行（或至少是开始标签）之后会出现虚假的逗号或分号。

这会导致, ,最终 JS（在 HBS 呈现它之后）中的潜在可能性，这是浏览器中的一个 JS 错误，会破坏页面。

我想我可以通过从原始视图模板中的这些条件中删除所有换行符来避免这个问题，但是 a) 我不想这样做，因为它们澄清了代码，b) 工作量很大，c) 它没有修复根本问题，所以我可能会在未来或其他领域绊倒。我也知道像这样动态渲染 JS 可能并不理想或不现代，它应该全部封装在某个库中，从而避免整个问题，但这是另一个问题。

在我的源视图模板中使用这样的简化案例：

<script>
    {{#if foo}}
        console.log('foo');
    {{/if}}
    {{#if bar}}
        console.log('bar');
    {{/if}}
    {{#if three}}
        console.log('three');
    {{/if}}

和一个标准的 Gulp 任务，例如：

const htmlmin = require('gulp-html-minifier-terser');

...pipe(htmlmin({
    collapseWhitespace: true,   
    conservativeCollapse: true, 
    minifyJS: true,
    removeComments: true,       
    ignoreCustomFragments: [ /{{[\s\S]*?}}/ ]
})

导致一个预编译的缩小 HBS 模板，如下所示：

{{#if foo}} ,console.log("foo"), {{/if}} ,{{#if bar}} ,console.log("bar"), {{/if}} ,{{#if three}} ,console.log("three"), {{/if}} ,

其中（如果所有条件恰好为假）在浏览器中呈现为<script>, , , 导致 Javascript 错误。

我试过了：

关闭序列minifyJS: {compress:{sequences:false}},会导致分号出现在每个 HBS 块之后，这可以解决最终的 JS 错误，但不能解决根本原因。这表明问题在链条的早期。

{{#if foo}} ;console.log("foo"); {{/if}} ;{{#if bar}} ;console.log("bar"); {{/if}} ;{{#if three}} ;console.log("three"); {{/if}} ;

这被呈现为`; ; ; ' 被浏览器忽略，但仍然不正确。

我还尝试完全关闭压缩和修改，{compress: false, mangle:false}并输出：美化。

还有一个output:{semicolons:false}选项听起来很明显，但关闭它实际上会删除分号！结果是：

{{#if foo}} console.log("foo") {{/if}} {{#if bar}} console.log("bar") {{/if}} {{#if three}} console.log("three") {{/if}} 

这将呈现（如果标志为真）这也是无效的JS：

console.log("foo")   console.log("bar")  console.log("three") 

我猜这是因为 JS minifier 看到了 Html-Minifier 已经忽略的 {{...}} 块，并假定它们是某种 JS 范围块，它添加了一个 ; 以预期删除换行符。

所以我一直在想我还需要告诉 Uglifier 忽略相同的块。或者一些中间选项说“根本不要更改分号”。

标签： javascriptexpressgulphandlebars.jsminify