Javascript 有人能帮我解决前端脚本问题吗？我需要知道这是编写这个脚本的唯一方法还是有更好的方法

我是一名从事脚本注入的前端开发人员。下面是我通常使用Adobe Target注入脚本的方式，但该方法存在很多问题：

1.很难调试，因为我的代码编辑器无法识别JS文件中的HTML和CSS，因为我的HTML和CSS在每一行中都被包装在“”和+中，所以如果您在CSS或HTML中的代码中输入了错别字或遗漏了“position:relative”之类的内容，那么您需要检查所有行以找出错误所在

2.随着代码的增长，很难跟踪所有内容

3.由于所有内容都在一个JS文件中，我的代码编辑器对扩展名和其他功能（编译器）毫无用处，我必须自己手动在每行末尾添加“”，尤其是1000行代码

所以，有人知道在js文件中使用HTML+CSS的更好方法，但是代码编辑器为VSCode编译代码或扩展，可以在js中编译HTML+CSS，让我的生活更轻松？ 我知道这是一种非传统的方法，但我正在寻找更好的方法，如果有人用更好的方法做同样的事情

var style = document.createElement('style');
style.type = 'text/css';

//CSS GOES HERE //This is an example
var css = '.container-fluid {' +
    'height: 400px;' +
    'background-color: black;' +
    'position: relative;'+
    'float: right;'+
    'width: 20%;'+
    'text-align: center;'+
    'right: 230px;'+
'}' ;

if (style.styleSheet) {
    style.styleSheet.cssText = css;
    } else {
    style.appendChild(document.createTextNode(css));
    }
    var script = document.getElementsByTagName("script")[0];
    script.parentNode.insertBefore(style, script);

const anyvar =
  '<div id="container-fluid">' +
  
  //HTML CONTENT GOES HERE

  '</div>';

// INSERT HTML CONTENT USING JQuery

$(anyvar).insertAfter(".someclass");

var style=document.createElement（'style'）；
style.type='text/css'；
//CSS在这里//这是一个例子
var css='.container流体{'+
'高度：400px；'+
'背景色：黑色；'+
'位置：相对；'+
'浮动：对；'+
“宽度：20%；”+
'文本对齐：居中；'+
'右：230px；'+
'}' ;
if（style.styleSheet）{
style.styleSheet.cssText=css；
}否则{
appendChild（document.createTextNode（css））；
}
var script=document.getElementsByTagName（“脚本”）[0]；
script.parentNode.insertBefore（样式，脚本）；
康斯特安瓦尔=
'' +
//HTML内容在这里
'';
//使用JQuery插入HTML内容
$（anyvar）.insertAfter（“.someclass”）；

如果我是你，我会将代码分割成多个文件，并使用模块绑定器将其插入JS。这正是解决这个问题的方法

一种方法是使用Webpack。使用npm包

原始加载程序
，您可以从CSS文件开始，例如

/* styles.css */
.container-fluid {
  height: 400px;
  background-color: black;
}

然后您可以导入它并将其分配给
标记的
.textContent
：

import styleTextCss from './styleText.css';

/// styleTextCss is now a string containing the entire contents
// of the above file

// ...

style.textContent = styleTextCss;

这需要一点设置，但非常值得，特别是对于那些并非完全琐碎的东西

（这也使得将预处理器集成到开发过程中变得非常容易，如果您希望这样做的话——它可以使事情更有条理，减少重复）

同样的技术也适用于HTML

拥有具有正确文件扩展名的独立文件可以实时突出显示和验证语法。
谢谢！我检查了Webpack以及所有文件是如何捆绑在一起的，但是如果你注意到我的代码，我没有使用带有head和body标记的整个html文件，我只创建了我想要注入的div，那么是否可以使用Webpack将html和我要注入的div捆绑在任何网站上，并将CSS单独捆绑在.js文件中？如果是，您是否有任何明确的文件说明如何做到这一点？所有教程视频都不需要捆绑SCS和其他内容，但没有人演示如何将文件捆绑到一个.js中，该文件可以直接从浏览器控制台或使用Adobe Target注入。为了明确说明我不是在创建web应用程序，我只是在现有网页上注入脚本。例如，如果我的客户要求我将按钮的颜色从白色更改为红色，我将通过Adobe Target注入脚本以更改按钮的颜色，因为我无法访问实际网页的源代码repo。记住这一点！我想我在回答中提到了所有必要的东西。如果你想要一个现场演示，你可以查看我答案中的链接，它链接到一个使用该技术的repo：你所需要的只是原始加载程序包（带有Webpack），然后你可以在自己的文件中编写HTML或CSS，然后导入它们，你可以从文件中获得简单的字符串供JS使用。