Question

我在这里有点疯狂。我正在尝试使用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中 - 但这会导致'define is undefined'错误，这意味着没有引发RequireJS。所以相反，我会像这样输入HTML：

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

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

我能找到的最接近的事情是here，但现在并没有超级有用。作为参考，我使用this作为我的项目的起点 - 但是，当我运行它时，一切似乎都适用于他们但我找不到差异。

这是我的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'添加为该模块的依赖项，从而打破了整个过程。疯狂！

使用RequireJS和Grunt获取空白页面

1 个答案: