压缩JavaScript代码出现Unexpected character '`'错误该如何解决？

错误原因 #

• 你的代码中使用了ES6新增的模板字符串语法，该语法用反引号（）作为标识，你当前使用的两款JavaScript压缩工具仅支持ES5及更早版本的JS语法，无法识别反引号字符，因此抛出Unexpected character ''错误。
• 你代码中有两处用到了模板字符串：一处是给#loginButton设置html内容的代码，另一处是给#messages设置html内容且携带变量插值的代码。

解决方法 #

方案一：更换支持ES6+语法的压缩工具 #

直接替换为兼容ES6及更高版本语法的压缩工具即可，无需修改现有业务代码，可选工具包括terser、uglify-es等，主流的前端构建工具（webpack、vite等）内置的压缩能力默认都支持ES6+语法。

方案二：将模板字符串改写为ES5兼容写法 #

如果你必须继续使用当前的旧压缩工具，把两处模板字符串替换为普通单/双引号+字符串拼接的写法即可：

第一处修改前代码：

$("#loginButton").html(`<div class="spinner-border text-light spinner-border-sm" role="status"><span class="visually-hidden">Loading...</span></div> Submit`);

第一处修改后代码：

$("#loginButton").html('<div class="spinner-border text-light spinner-border-sm" role="status"><span class="visually-hidden">Loading...</span></div> Submit');

第二处修改前代码：

$("#messages").html(`
<div style="margin-bottom: 0px" class="alert alert-success alert-dismissible fade show" role="alert" id="messages">
    <strong class="text-dark">${data["message"]}</strong>
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>`)

第二处修改后代码：

$("#messages").html(
'<div style="margin-bottom: 0px" class="alert alert-success alert-dismissible fade show" role="alert" id="messages">' +
    '<strong class="text-dark">' + data["message"] + '</strong>' +
    '<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>' +
'</div>'
);

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