1

私はここで少し頭がおかしくなっています。Grunt を使用して、大規模な RequireJS ベースのプロジェクトを実行し、展開プロセス中に結果を結合して縮小しようとしています。これが私のうなり声のプロセスです(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 が呼び出されなかったことを意味する「define is undefined」エラーが発生しました。代わりに、次のように HTML を挿入します。

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

ただし、今は空白のページしか取得していません。

このように聞こえる最も近いものはhere ですが、今のところあまり役に立ちません。参考までに、これをプロジェクトの出発点として使用していましたが、実行するとすべてが機能しているように見えますが、違いが見つかりません。

ここに私の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 の後に宣言されるモジュールでは、モジュールを宣言するときに「define」ではなく「require」を使用します。

「define」を使用すると、そのモジュールの依存関係として「config」が追加され、全体が壊れました。クレイジー!

于 2013-08-05T13:17:59.523 に答える