使用RequireJS和Grunt获取空白页面

Getting blank page using RequireJS and Grunt

本文关键字:空白 获取 Grunt RequireJS 使用      更新时间:2023-09-26

我在这里有点疯了。我正试图使用Grunt来完成一个基于RequireJS的大型项目,并在部署过程中组合和缩小结果。以下是我的咕哝过程(使用咕哝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>

然而,现在我只收到一张空白页。

我能找到的最接近的东西,听起来像是在这里,但现在并没有太大帮助。作为参考,我把它作为我项目的起点——然而,当我运行它时,一切似乎都对他们有效,但我找不到区别。

这是我的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();
}
);

好吧,这就是疯狂的简单修复:

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

如果你使用"define",它会添加"config"作为该模块的依赖项,这破坏了整个过程。疯狂!