使用Javascript组件打包标记以用作模板

Question

我有一个HTML文档template.html，看起来像是：

<div id="Foo">
    <span class="Bar"></span>
    ...
</div>

我用它作为模板在Javascript中为组件构建一些DOM。

首先，我只是通过复制粘贴标记并将其包装在example.html标记内，将其添加到我的页面<template>。然后在我的Javascript中，我构建了一个克隆，通过执行以下操作将其添加到页面中：

var myTemplate = Document.getElementById('#myTemplateId').cloneNode(true);
Document.getElementById('#newParent').appendChild(myTemplate, true);

虽然这有效，但我显然不想复制和粘贴我的模板以便能够使用我的组件。

我想做的是以某种方式将我的模板标记打包到我的Javascript中。我仍然希望保持我的Javascript和Markup分开用于开发和理智，但是在构建时（我使用GruntJS作为我的任务运行器）我想要以某种方式将它们组合在一起以便它们可以打包在一起，简单链接到文件。我的意思是我想要一些方法来使用我的Javascript打包模板，如Javascript。那就是说，我想我的更广泛的问题是：

如何将Markup保存/打包成Javascript文件或对象（JSON），以便它可以用作模板以便稍后在Javascript中生成DOM？

我最接近找到一个可能的解决方案是将标记文档template.html转换为字符串，将其保存到变量，然后通过.innerHTML将其添加到临时元素，然后将其转换为DocumentFragment。虽然这可行，但必须有更好的方法，将标记转换为字符串感觉不对。

更新

通过我的研究，我知道行业的趋势正在转向HTML imports。但是，它是not widely supported yet，所以在此期间，我仍然希望能够将我的模板打包到我的js中。