Javascript 如何从Web包编译的模板文本中删除\n和\t？

我正在开发一个javascript插件，它使用es6模板文本来生成一个模板，我在插件中附加了一段代码

"use strict";
(function () {
window.project = {
    template: {
        generateHtmlTemplate: function(data) {
        var template = `
             <div class="main">
                <div class="wrap">
                    <input type="text" value="${data.val}" />
                </div>
             </div>`;
       return template;
      }
   }
}

任何解决这一问题的建议都将不胜感激

---

提前感谢。

模板文本不是这样工作的：它们保留空白。此功能非常有目的，因为它允许您保留格式，就像其他语言中的格式化字符串一样（例如，中的herdocs和中的三倍引号字符串）。如果您不希望出现这种行为，那么您可以像ES 6之前的老日子一样连接普通字符串：

window.project = {
    template: {
        generateHtmlTemplate: function(data) {
        var template = '' +
             '<div class="main">' +
                '<div class="wrap">' +
                    '<input type="text" value="' + data.val + '" />' +
                '</div>' +
             '</div>';
        return template;
      }
   }
}

window.project={
模板：{
generateHtmlTemplate:函数（数据）{
变量模板=“”+
'' +
'' +
'' +
'' +
'';
返回模板；
}
}
}

请注意，这在源代码中很难读取。是否值得在有效负载中保存少量字节是主观的，但FWIW我会坚持使用模板字符串

编辑 如果您确实想使用模板，但去掉了空白，只需执行以下操作：

function(data) {
    var template = `
        <div class="main">
            <div class="wrap">
                <input type="text" value="${data.val}" />
            </div>
        </div>`.replace(/[\t\n]+/g, ''); // remove all tabs and returns
    return template;
}

功能（数据）{
变量模板=`
`.replace（//[\t\n]+/g'，）；//删除所有选项卡和返回项
返回模板；
}

我已经找到了我想要的解决方案

创建一个babel插件来删除它

var pattern = new RegExp("[\n\t ]+", "g");

function transfrom (quasis) {
  ["raw", "cooked"].forEach(function (type) {
    quasis.forEach(function (element) {
      element.value[type] = element.value[type].replace(pattern, " ");
    });
  });  
}

module.exports = function (babel) {
  var t = babel.types;

  return {
    visitor: {
      TaggedTemplateExpression: function (path) {
        let node = path.node;

        if (t.isIdentifier(node.tag, { name: "nowhitespace" })) {
          transfrom(node.quasi.quasis);
          return path.replaceWith(node.quasi);
        }
      }
    }
  };
};

它有点旧，但仍然有效

---

链接问题中的公认答案建议使用标记模板-您不能这样做吗？是的，建议使用一个为标记模板提供功能的包，但您可以使自己的功能更好地满足您的需要。但它对我不起作用。该包注入its代码以删除\n和\t以及插件代码。这就是那个软件包所做的，这是webpack生产构建的输出。所以它缩小了空白。@CaptainAdmin它与webpack无关，它只是一种不同的方式来表示源文件中模板文本中的完全相同的空白。同样，这就是模板文本的工作原理。如果你想要别的东西，你必须用别的东西。@CaptainAdmin，这一点也不清楚。这些\n和\t是您（程序员）在源文件的模板文本中放入的回车符和制表符。Webpack在将模板文本转换为字符串时会保留它们，因为第一百万次模板文本应该保留文本空白。如果您不想这样做，那么作为程序员，您不需要在源文件中插入它们，或者在原始字符串（而不是输出文件）上使用regex替换。缺少的是，需要的是解释为什么你不能。。。。。。（续）只需按照我列出的任何一种方式更改源文件，以防止“问题”发生。为什么必须在构建管道中处理此问题？为什么您必须使用模板文字，即使它显然不能满足您的需要，而且有一个显而易见的简单替代方法可以做到这一点？在问题中加入这些限制的原因，我将收回最后一票：我真的没有兴趣结束你的问题。为了清晰起见，我宁愿你编辑它，得到一个你可以使用的答案和一些投票！理解。我已通过删除空格更改了源（以避免\t），并添加了+以连接剩余的空格并避免\n。无论如何，谢谢你，我已经撤回了我的投票。别忘了你可以接受自己的答案。你可能想在你的答案中加入一些内容，以防链接过时。那么解决方案是什么呢？请包括链接中的相关部分。如果该网页在将来被删除，那么这个答案将变得毫无价值。

function(data) {
    var template = `
        <div class="main">
            <div class="wrap">
                <input type="text" value="${data.val}" />
            </div>
        </div>`.replace(/[\t\n]+/g, ''); // remove all tabs and returns
    return template;
}

var pattern = new RegExp("[\n\t ]+", "g");

function transfrom (quasis) {
  ["raw", "cooked"].forEach(function (type) {
    quasis.forEach(function (element) {
      element.value[type] = element.value[type].replace(pattern, " ");
    });
  });  
}

module.exports = function (babel) {
  var t = babel.types;

  return {
    visitor: {
      TaggedTemplateExpression: function (path) {
        let node = path.node;

        if (t.isIdentifier(node.tag, { name: "nowhitespace" })) {
          transfrom(node.quasi.quasis);
          return path.replaceWith(node.quasi);
        }
      }
    }
  };
};