1

我在这里有点疯了。我正在尝试使用 Grunt 来完成一个基于 RequireJS 的大型项目，并在部署过程中合并和缩小结果。这是我的 grunt 过程（使用 grunt-contrib-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();

}
);
4

1 回答 1

2

好的，所以这是疯狂的简单修复：

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

如果您使用“定义”，它会添加“配置”作为该模块的依赖项，这破坏了整个事情。疯狂！

于 2013-08-05T13:17:59.523 回答