使用RequireJS和Grunt获取空白页

Question

我在这里有点疯了。我试图使用Grunt来完成一个基于RequireJS的大型项目，并在部署过程中组合和缩小结果。下面是我的咕噜过程(使用咕噜-控制-要求)：

requirejs: {
        compile: {
            options: {
                baseUrl: "public/js",
                mainConfigFile: "public/js/config.js",
                name: 'config',
                out: "public/js/optimized/script.min.js",
                preserveLicenseComments: false
            }
        }
    }

最初，我使用输出脚本并将其放入HTML中--但这会导致“定义是未定义的”错误，这意味着RequireJS没有被调用。因此，我把HTML放在下面这样的地方：

<script data-main="js/optimized/script.min" src="js/vendor/require.js"></script>

然而，现在我只得到一个空白页。

我能找到的最接近的东西，听起来像是这里，但现在不是很有帮助。作为参考，我使用这作为我的项目的起点--然而，当我运行它时，一切似乎都在为它们工作，但我找不到它们的区别。

这是我的config.js文件：

require.config({

//Define the base url where our javascript files live
baseUrl: "js",

//Increase the timeout time so if the server is insanely slow the client won't burst
waitSeconds: 200,

//Set up paths to our libraries and plugins
paths: {
    'jquery': 'vendor/jquery-2.0.3.min',
    'underscore': 'vendor/underscore.min',
    'backbone': 'vendor/backbone.min',
    'marionette': 'vendor/backbone.marionette',
    'mustache': 'vendor/mustache.min',
    'bootstrap': 'vendor/bootstrap.min',
    'bootbox': 'vendor/bootbox.min',
    'jquery-ui': 'vendor/jquery-ui-1.10.2',
    'app-ajax': '../conf/app-ajax',
    'common': 'common',
    'moment': 'vendor/moment.min'
},

//Set up shims for non-AMD style libaries
shim: {
    'underscore': {
        exports: '_'
    },

    'backbone': {
        deps: ['underscore', 'jquery'],
        exports: 'Backbone'
    },

    'marionette': {
        deps: ['backbone', 'underscore', 'jquery'],
        exports: 'Marionette'
    },

    'mustache': {
        exports: 'mustache'
    },

    'bootstrap': {
        deps: ['jquery']
    },

    'bootbox': {
        deps: ['jquery', 'bootstrap'],
        exports: 'bootbox'
    },

    'jquery-ui': {
        deps: ['jquery']
    },

    'jquery-layout': {
        deps: ['jquery', 'jquery-ui']
    }

}
});

//Initalize the App right after setting up the configuration
define([
    'jquery',
    'backbone',
    'marionette',
    'common',
    'mustache',
    'bootbox',
    'controllers/GlobalController',
    'routers/GlobalRouter'
],
function ($, Backbone, Marionette, Common, Mustache, bootbox) {

    //Declare ECMAScript5 Strict Mode first and foremost
    'use strict';

    //Define the App Namespace before anything else
    var App = Common.app_namespace || {};

    //Create the Marionette Application
    App.Application = new Marionette.Application();

    //Add wrapper region, so we can easily swap all of our views in the controller in and out of this constant
    App.Application.addRegions({
        wrapper: '#wrapper'
    });        

    // Set up Initalizer (this will run as soon as the app is started)
    App.Application.addInitializer(function () {

        //Reach into Marionette and switch out templating system to Mustache
        Backbone.Marionette.TemplateCache.prototype.compileTemplate = function (rawTemplate) {
            return Mustache.compile(rawTemplate);
        };

        var globalController = new App.Controllers.GlobalController();

        var globalRouter = new App.Routers.GlobalRouter({
            controller: globalController
        });

        //Start Backbone History
        Backbone.history.start();

    });

    //Start Application
    App.Application.start();

}
);

Answer 1

好吧，这就是疯狂的简单修正：

在require.config之后声明的模块中，在声明模块时使用“require”而不是“define”。

如果您使用“define”，它会添加“config”作为该模块的依赖项，从而破坏了整个过程。疯狂！