Question

我在我的网站上使用Backbone.js，Handlebars.js和Webpack。我曾经使用Require.js代替Webpack。我有以下文件：

template.js

define({
    structure:      "structure.html",
    home:           "home.html"

});

webpack.config.js

resolve: {
        extensions: ['', '.js', '.json'],

        alias: {
            root: path.resolve( __dirname ),
            "router": path.resolve( __dirname ) + "/www/js/router",
            "templates": path.resolve( __dirname ) + "/www/js/templates",
            "handlebars": path.resolve( __dirname ) + "/node_modules/handlebars/dist/handlebars",
        "templates_html": path.resolve( __dirname ) + "/www/templates"
        }    
    },

view.js

define( ['jquery', 'underscore', 'backbone', "utils" ], 
       function($, _, Backbone, Utils) {

    var View = Utils.Page.extend({

        constructorName: "View",
        id: "home",

        initialize: function() {
            this.template = Utils.templates.home; // this is what I need

        },

        render: function () {
            this.$el.html(     this.template( this.model.toJSON() )    );
            return this;
        },

    });

    return View;

});

我想在我的网站开头用Handlebars.js编译所有模板。当我使用Require.js时，我习惯做这样的事情：

utils.js

define( ['jquery', 'underscore', 'backbone', 'handlebars', 'templates'], 
       function($, _, Backbone, Handlebars, Templates) {

    var Utils = {
        templates: {}
    };

    for (var t in Templates) {
      Templates[t] = "text!" + Templates[t];
    }

    require(_.values(Templates), function() {

        var fragments = _.object(_.keys(Templates), arguments);

        // precompile all the fragments
        for (var t in fragments) {
          Utils.templates[t] = Handlebars.compile(fragments[t]); /* <Handlebars> */
        }

    });
    return Utils;
});

如何使用webpack在 utils.js 中执行类似的操作？

由于

Answer 1

你可以使用这个把手加载器用于web包https://github.com/pcardune/handlebars-loader/blob/master/README.md那里给出了完整的信息，但基本上设置加载器来编译你的模板文件夹中的所有html文件，或者将它们从.html重命名为.hbs或.handlebars然后简单地在你的模块中要求它们，它们将被编译。

Handlebars.js和Webpack - 预编译模板

1 个答案: