Javascript 分发基于下划线.js的模板

我需要捆绑客户端模板，以便其他人将其用作主干组件库的一部分。我不能使用RequireJS或任何其他AMD解决方案

我的想法是将所有HTML模板组合成一个isngle JS文件，该文件定义了包含模板的变量。然后有人就必须这样做：

<script type="text/javascript" src="/js/templates.js"></script>

这个想法似乎奏效了。仍然允许人们毫不费力地传递自己的模板，同时仍然允许我在构建时将所有模板合并到单个HTML文件中

尽管如此，我感觉到所有这些结合在一起的复杂性。对于初学者，每一行都需要转换为\n、转义字符等

老实说，我想不出别的办法来做这件事。我试着在谷歌上搜索，但没发现有什么帮助。RequireJS只是提供了一种加载文本的好方法，但这对我没有多大帮助

是否有更好的方法来实现我的目标，或者我的方法是否尽可能好？

你熟悉吗？在我的一个项目中，我使用在构建时将单个模板编译成一个文件。我将它们分别存储为单独的HTML文件，然后将其保存在Gruntfile.js中：

jst: {
    compile: {
        options: {
            namespace: 'app.templates',
            processName: function(filename) {
                // simplify the template names
                filename = filename.replace('app/templates/', '');
                return filename.replace('.html', '');
            }
        },
        files: {
            "<%= yeoman.app %>/scripts/templates.js": ["<%= yeoman.app %>/templates/{,*/}*.html", "<%= yeoman.app %>/templates/**/{,*/}*.html"]
        }
    }
}

---

我们都很专业。使用Grunt将是一场艰苦的战斗。wro4j也将迫使我们重新适应我们的项目，这也是一场艰苦的战斗。在尝试适应wro4j时，您到底面临什么问题？如果我能更好地理解你的问题，我可以帮你。通常wro4j不需要对项目结构进行任何更改，而且非常易于扩展。

var V = Backbone.View.extend({
    initialize: function() {
        if (_.isUndefined(this.template)) {
            this.template = _.template(ns.templates['my-special-list']);
        } else {
            this.template = _.template(this.template);
        }
   }

   render: function() {
        this.$el.html(this.template.render(this.options));
   }
}

jst: {
    compile: {
        options: {
            namespace: 'app.templates',
            processName: function(filename) {
                // simplify the template names
                filename = filename.replace('app/templates/', '');
                return filename.replace('.html', '');
            }
        },
        files: {
            "<%= yeoman.app %>/scripts/templates.js": ["<%= yeoman.app %>/templates/{,*/}*.html", "<%= yeoman.app %>/templates/**/{,*/}*.html"]
        }
    }
}

<h1 class='topbar-header'><%= title %></h1> <h2 class="subtitle"><%= subtitle %></h2>

var template = app.templates['inc/header'];
var code = template({title: 'Hello', subtitle: 'World'});
this.$el.html(code);