如何禁止html-minifier解析属性值？ES6模板值遭错误转换

当你使用html-minifier压缩包含ES6模板值的HTML代码（比如<span style="width:${Width}"></span>）时，工具会把${Width}替换成{}，这是因为html-minifier集成的clean-css模块会将这类模板占位符识别为无效CSS值，自动进行替换。

以下是几种解决办法：

• 禁用CSS压缩：在配置中关闭minifyCSS选项，这样style属性内的内容不会被处理，模板字符串得以保留。示例配置：

  const htmlMinify = require('html-minifier').minify;
  const result = htmlMinify('<span style="width:${Width}"></span>', {
    minifyCSS: false,
    // 保留你的其他压缩配置
  });
  

• 转义模板占位符：将代码中的${Width}改为\${Width}，压缩后会还原为原始的${Width}，注意确保后续渲染逻辑能正确解析转义后的字符。

• 自定义CSS压缩逻辑：如果需要保留部分CSS压缩功能，可以自定义minifyCSS的处理函数，检测到包含模板占位符的CSS内容时直接返回原内容，否则正常压缩：

  const htmlMinify = require('html-minifier').minify;
  const CleanCSS = require('clean-css');
  
  const result = htmlMinify('<span style="width:${Width}"></span>', {
    minifyCSS: (cssText) => {
      if (cssText.includes('${')) {
        return cssText;
      }
      return new CleanCSS().minify(cssText).styles;
    },
    // 其他配置项
  });
  

内容的提问来源于stack exchange，提问作者Dan D