骨干、requirejs、grunt requirejs 使用外部模板答案

【问题标题】：backbone, requirejs, grunt requirejs use external templates骨干、requirejs、grunt requirejs 使用外部模板
【发布时间】：2016-01-28 15:33:14
【问题描述】：

我在一个带有requirejs的backbonejs项目中使用。我使用 Gruntjs 作为构建过程。在这个项目中，我使用外部下划线模板。下面是我的目录结构。

MainApp/
    app/
        images/
        js/
        styles/
        templates/
    index.html

下面是我在 Gruntfile.js 中的 requirejs 选项

requirejs: {
        compile: {
            options: {
                name: "views/app",
                baseUrl: "prod/js",
                mainConfigFile: "prod/js/main.js",
                out: "prod/scripts/scripts.min.js",
                include: ['libs/requirejs/require.js']
            }
        }
    }

但是，这似乎不起作用。当我通过运行 grunt 命令构建它时，它确实成功构建了项目，即在构建过程中我没有收到任何错误。但是当我想在浏览器中运行这个项目时，它不起作用。它以正确的样式正确显示主页，但 javascript 功能不起作用。我能想到的原因之一是我正在使用 grunt requirejs 插件似乎没有使用的外部模板。

如何使用外部模板？

更新

我正在使用 grunt-contrib-requirejs 插件。

【问题讨论】：

显示浏览器控制台输出
@TomaszJakubRup 浏览器控制台中没有错误。 :(
ok，然后显示网络输出
@TomaszJakubRup 请在我更新的问题中查看随附的照片。
看起来不错。使用外部模板显示视图

标签： javascript backbone.js gruntjs requirejs

【解决方案1】：

RequireJS 配置文件不会包含在输出文件中。您必须拆分配置和主应用程序：

src/js/config.js

/*global require:false */
require.config({
        urlArgs: 'version=' + (new Date()).getTime(),

        paths: {
                'jquery'        : 'libs/jquery/dist/jquery',
                'underscore'    : 'libs/underscore/underscore',
                'backbone'      : 'libs/backbone/backbone',
                'localStorage'  : 'libs/backbone.localStorage/backbone.localStorage',
        'text'          : 'plugins/text'
        }
});

src/js/main.js

/*global require:false */
/*global Backbone:false */
/*global _:false */

require(['views/app', 'collections/todos', 'router'], function (AppView, TodoCollections, Router) {
        window.App = {
                Vent: _.extend({}, Backbone.Events)
        };

    new AppView({
        collection: new TodoCollections()
    });

    window.App.TodoRouter = new Router();
        Backbone.history.start();
});

Gruntfile.js

requirejs: {
        compile: {
                options: {
                        baseUrl: "dist/js",
                        mainConfigFile: "dist/js/config.js",
                        name: 'main',
                        out: "dist/scripts/scripts.min.js",
                        include: 'libs/requirejs/require.js',
                        optimize: 'none',
                        preserveLicenseComments: false,
                        useStrict: true,
                        wrap: true
                }
        }
},

【讨论】：