Backbone.js 如何使用brunch.js将多个html文件合并为一个

我使用

underline.js

作为模板，这些模板存储在多个单独的

XXX\u tpl.html

文件中，类似于：

<script type="text/x-template" id="tpl_XXX">
  <h1>hi</h1>
</script>

我现在使用的是brunch.js构建工具，它可以很好地将我所有的libs/js/css代码输出到几个优化的文件中，但是我在管理/组织模板方面遇到了问题。如何使brunch.js构建工具在

index.html

末尾附加所有

*\u tpl.html

文件？我在网上看到的所有示例都展示了如何使用

brunch.js

将模板合并到

.js

文件中，但我还不明白这是如何工作的（模板是html/js的混合体，在

.js

文件中存储模板时，我失去了ID和语法格式化/突出显示的访问权限）

问题1。如果我所做的是正确的（多个不同

.tpl.html

文件中的多个模板在构建时都附加在

index.html

的末尾），那么我如何使

build.js

合并所有这些

问题2。如果我做的不对，那么有什么更好的方法：

• 具有多个易于组织和管理的模板
• 不创建额外的http请求以将/全部编译到单个文件中
• 易于从backbone.js模型访问
• 希望在我的IDE中为模板标记实现语法高亮显示（即没有JS字符串连接等）

---

问得好，但我不知道您是否理解下划线模板应该如何精确工作。让我们先把它弄清楚

模板编译 下划线模板源是任何带有插入代码的文本。例如：

var myTemplateString = "hello: <%= name %>";

这将创建一个包含模板逻辑的

myTemplateFunction

。通过非常简化的伪代码方式，您可以期望

myTemplateFunction

的工作方式如下：

function (context) { return  "hello: " + context.name };

var myTemplateFunction = require('./template.html')
console.log(myTemplateFunction);

现在，您了解了为什么可以调用此函数并生成字符串了

myTemplateFunction({name: 'moe'}) // hello: moe

使用编译模板 好的，但是为什么您需要先编译它呢？为什么不直接打电话：

_.template(myTemplateString)({name: 'moe'})

因为编译可能是CPU密集型的。因此，使用预编译模板的速度要快得多。您不应强制用户的浏览器执行此操作！你应该为他做这件事

交付编译的模板 到目前为止，您已经明白，您并不关心将函数的文本传递给客户端，只关心编译后的模板函数。有很多方法可以实现这一点

早午餐有一堆用于预编译模板的插件，但显然没有用于下划线的插件：

你可以使用它，而且它是免费的

您的代码如下所示：

function (context) { return  "hello: " + context.name };

var myTemplateFunction = require('./template.html')
console.log(myTemplateFunction);

您还可以使用和它的下划线模板任务：

---

无论您选择哪一个，它们都将以类似的方式工作：它们将您的模板编译成一个函数，您将能够使用该函数。就个人而言，我推荐学习网页

请记住，下划线模板实际上已转换为JS函数。通过将它们预编译为.js并将其与应用程序的其余部分合并，您不必在渲染时进行转换。要想在没有ID访问的情况下实现这一点，最简单的方法是按照建议查看require.js，如果您想要一个更轻松的解决方案，也可以浏览它；）