5

在过去的几天里,我一直在使用 Require.JS 和 SignalR,我注意到当我加载我的网站时,有时 SignalR/Hubs 似乎在 jquery 之前加载,尽管我的 require.js 配置似乎是正确的。

这是我的配置:

require.config({
    paths: {
        jQuery: 'libs/jquery/jquery',
        Underscore: 'libs/underscore/underscore',
        Backbone: 'libs/backbone/backbone',
        Marionette: 'libs/backbone/backbone.marionette'
    }
});

require([
        'app',
        'order!libs/jquery/jquery-min',
        'order!libs/jQueryUI/jquery-ui-1.8.11.min',
        'order!libs/jqGrid/grid.locale-en',
        'order!libs/jqGrid/jquery.jqGrid.min',
        'order!libs/underscore/underscore-min',
        'order!libs/backbone/backbone-min',
        'order!Marionette',
        'order!libs/jquery.signalR-0.5.1',
        'order!noext!signalr/hubs'
    ], function (app) {
        app.initialize();        
    });

当这失败时,我在集线器文件的第 16 行收到错误消息。它说uncaught TypeError: Cannot read property 'signalR' of undefined

升级到 V2 并修改了我的配置。

var fRequire = require.config({
    paths: {
        jQuery: 'libs/jquery/jquery',
        Underscore: 'libs/underscore/underscore',
        Backbone: 'libs/backbone/backbone',
        Marionette: 'libs/backbone/backbone.marionette',
        sigr: 'libs/jquery.signalR-0.5.1'
    },
    shims: {        
        "libs/jquery.signalR-0.5.1": {
            deps: ["jQuery"]
        },
        "libs/jqGrid/jquery.jqGrid.min": {
            deps: ["jQuery"]
        },
        "libs/jquery/jquery-ui-1.8.19.min": {
            deps: ["jQuery"]
        },
        "libs/jqGrid/grid.locale-en": {
            deps: ["jQuery"]
        },
        "noext!signalr/hubs": {
            deps: ["sigr"]
        }
    }
});

fRequire([
    'app'
], function (app) {
    app.initialize();
});

现在需要在错误的位置查找 jquery、下划线等...尽管我具体告诉它在哪里查找。也许这与我在使用 v1 配置 require 时遵循旧教程有关。

http://backbonetutorials.com/organizing-backbone-using-modules/

最后更新:

这是我的工作配置。希望它能帮助像我这样的新手通过这个问题。

require.config({
    baseUrl: '/js',
    paths: {
        "jquery": 'libs/jquery/jquery-min',
        "underscore": 'libs/underscore/underscore-min',
        "backbone": 'libs/backbone/backbone-min',
        "marionette": 'libs/backbone/backbone.marionette',
        "sigr": 'libs/jquery.signalR-0.5.1'
    },
    shims: {
        "backbone": {
            deps: ["underscore", "jquery"],
            exports: "Backbone"
        },
        "underscore": {
            deps: ["jquery"]
        },
        "marionette": {
            deps: ["backbone", "jquery"]
        },
        "sigr": {
            deps: ["jquery"]
        },
        "libs/jqGrid/jquery.jqGrid.min": {
            deps: ["jquery"]
        },
        "libs/jquery/jquery-ui-1.8.19.min": {
            deps: ["jquery"]
        },
        "libs/jqGrid/grid.locale-en": {
            deps: ["jquery"]
        },
        "noext!signalr/hubs": {
            deps: ["sigr"]
        }
    }
});

// for future ref, I loaded jquery here because app.js references sigr which requires it.
// without enabling it before the module is loaded sigr would complain jquery was not enabled.
require([
    'libs/domReady',
    'app',
    'jquery'
], function (domReady, app, $) {
    domReady(function () {
        app.initialize();
    });
});

我必须在函数中加载 jquery(domready、app、$)。如果不这样做,将导致信号器报告无法找到它。

4

2 回答 2

5

如果您使用的是 requirejs 2.x,则可以使用“shims”配置属性。您可以在此处指定不符合 AMD 标准的文件之间的依赖关系,例如 jquery、jqueryui 等。

以您的配置为例:

require.config({ 
   paths: { 
      jQuery: 'libs/jquery/jquery', 
      Underscore: 'libs/underscore/underscore', 
      Backbone: 'libs/backbone/backbone', 
      Marionette: 'libs/backbone/backbone.marionette' 
   },
   // specify depedencies
   shim: {
      "libs/jquery.signalR-0.5.1" : {
           deps: ["jQuery"]
       },
       "libs/jqGrid/jquery.jqGrid.min" : {
           deps: ["jQuery"] 
       }
   }
});

此外,在“shims”中配置依赖项消除了“order!”的使用。插入。

提示:使用“paths”为您的系统使用的 api 设置一个友好的名称,因此当该 api 的新版本发布时,您只需更改“paths”即可。

于 2012-07-13T22:13:02.137 回答
1

只是为了跟进所提供的答案以及为什么您仍然必须预先包含 jQuery ... require 的配置设置是“shim”,而不是“shims”。如果没有正确拼写配置设置,Require 将无法识别和预加载指定的依赖项。我最近对此感到震惊并发布了相关信息:http: //mikeycooper.blogspot.com/2013/01/requirejs-20-dependencies-seemingly.html

于 2013-01-26T02:27:25.770 回答