javascript - 如何缩小包含 css 代码的 javascript 文件

Question

我有这个 javascript 代码，我想缩小。用户应该将其嵌入到他们网站的头部。它纯粹是用 javascript 编写的。然而，我在 js 文件中嵌入了 css 代码。我尝试在网站 https://jscompress.com/ 上缩小但它不断抛出错误

File index.js: Unexpected character '`' (line: 1, col: 13)

有谁知道在没有“`”符号的 javascript 文件中实现我的 css 代码的替代方法。

这是我的代码:

var styles = `
.info{
display: flex;
color: black;
font-size: xx-small;
margin-left: 5px;
}

.text{
  margin-top: 12;
}

.verification {
        display: flex;
        flex-direction: horizontal;
        justify-content: center;
        align-items: center;
        width: 80px;
        height: 50px;
        background-color: white;
        color: white;
        padding: 6px 6px;
        margin: 8px 0;
        border: 1px solid green;
        border-radius: 4px;
        cursor: pointer;
        z-index: 500px;
       // opacity: 0.5;
       box-shadow: 5px 5px #d0dcd0;
        
}

.link {
    text-decoration: none;
    color: green;
}

`

var styleSheet = document.createElement("style")
styleSheet.type = "text/css"
styleSheet.innerText = styles
document.head.appendChild(styleSheet);
	window.onload = function () {
    var div = document.createElement("div");
div.style.position = "absolute";
div.style.left = "10px";
div.style.bottom = "10px";
div.innerHTML = "<div class='verification'><div class='img'><img height='30px' src='https://upload.wikimedia.org/wikipedia/commons/a/ab/Android_O_Preview_Logo.png' /></div><div class='info'><p > Verified by Champ <a class='link' href='#'>Learn more</a> </p</div><div>";
var lastChild = document.body.lastChild;
document.body.insertBefore(div, lastChild.nextSibling);
};
	

Answer 1

我正在使用Koala来缩小文件。当我尝试缩小您的代码时，出现了反向撇号错误。然而，使用Harmony ES6选项后，一切都很顺利，效果如下:

var styles=" \n.info{\ndisplay: flex;\ncolor: black;\nfont-size: xx-small;\nmargin-left: 5px;\n}\n\n.text{\n  margin-top: 12;\n}\n\n.verification {\n        display: flex;\n        flex-direction: horizontal;\n        justify-content: center;\n        align-items: center;\n        width: 80px;\n        height: 50px;\n        background-color: white;\n        color: white;\n        padding: 6px 6px;\n        margin: 8px 0;\n        border: 1px solid green;\n        border-radius: 4px;\n        cursor: pointer;\n        z-index: 500px;\n       // opacity: 0.5;\n       box-shadow: 5px 5px #d0dcd0;\n        \n}\n\n.link {\n    text-decoration: none;\n    color: green;\n}\n\n",styleSheet=document.createElement("style");styleSheet.type="text/css",styleSheet.innerText=styles,document.head.appendChild(styleSheet),window.onload=function(){var n=document.createElement("div");n.style.position="absolute",n.style.left="10px",n.style.bottom="10px",n.innerHTML="<div class='verification'><div class='img'><img height='30px' src='https://upload.wikimedia.org/wikipedia/commons/a/ab/Android_O_Preview_Logo.png' /></div><div class='info'><p > Verified by Champ <a class='link' href='#'>Learn more</a> </p</div><div>";var e=document.body.lastChild;document.body.insertBefore(n,e.nextSibling)};