为什么RequireJS忽略我的“路径”配置？

Question

AS-萨拉姆-alikum

我有配置如下

requirejs.config({ 
    baseUrl: "assets/js/", 
    paths: { 
     "jq"  : "lib/jquery/jquery", 
     "jqui"  : "lib/jquery/jquery-ui-1.10.4", 
     "jl"  : "lib/jquery/jquery.jlayout", 
     "jlb"  : "lib/jquery/jlayout.border", 
     "jqs"  : "lib/jquery/jquery.sizes", 
     "bb"  : "lib/marionette/backbone", 
     "js2"  : "lib/json2/json2", 
     "bbr"  : "lib/marionette/backbone.radio", 
     "mt"  : "lib/marionette/backbone.marionette", 
     "tk"  : "lib/marionette/marionette.toolkit", 
     "us"  : "lib/underscore/underscore", 
     "tpl"  : "lib/tpl/tpl" 
    }, 
    waitSeconds: 20, 
    shim: { 
       "jqui":{ 
         deps: ['jq'] 
       }, 
       "jl":{ 
         deps: ['jq'] 
       }, 
       "jqs":{ 
         deps: ['jq'] 
       }, 
       "jlb":{ 
         deps: ['jq'] 
       }, 
     "us": { 
      exports: "_" 
     }, 
     "bb": { 
      exports: ["Backbone"], 
      deps: ['jq','us','js2'] 
     }, 
     "bbr":{ 
      exports: ["Radio"], 
      deps: ["bb"] 
     }, 
     "mt": { 
      exports: "Marionette", 
      deps: ["bb","bbr"] 
     }, 
     "tk": { 
      exports: "Toolkit", 
      deps: ["mt"] 
     } 
    }, 
    deps: ['app/main'] 
}); 

应用程序/主要是如下

define([ 
       "require", 
       "jq", 
       "jqui", 
       "jqs", 
       "jlb", 
       "jl", 
       "app/blogapp/bap" 
       ], 
       function(
         require, 
         $, 
         jLayout, 
         bap 
         ){ 
          'use strict'; 
          jQuery(function($) { 
           var container = $('.layout'); 

           function layout() { 
            container.layout({ 
             resize: false, 
             type: 'border', 
             vgap: 8, 
             hgap: 8 
            }); 
           }; 

           $('.east').resizable({ 
            handles: 'w', 
            stop: layout, 
            resize: layout 
           }); 

           $('.west').resizable({ 
            handles: 'e', 
            stop: layout, 
            resize: layout 
           }); 

           $(window).resize(layout); 

           layout(); 
           layout(); 
          }); 
          var BlogApp = require("app/blogapp/bap"); 
          var blog = BlogApp.createApp(); 
          blog.start(options); 
         }, 
       function(
          err 
         ){ 
          //The errback, error callback 
          //The error has a list of modules that failed 
          var failedId = err.requireModules && err.requireModules[0]; 

          console.log("In err "+failedId); 
           console.log(err); 
         } 
); 

应用程序/ blogapp/BAP是如下

define(function (
        require 
       ){ 
         var tk=require("tk"); 
         var bb=require("bb"); 

        var ba = tk.App.extend({ 
         initialize: function() {}, 
        }); 
        return ba; 
       }, 
     function(
        err 
       ){ 
        //The errback, error callback 
        //The error has a list of modules that failed 
        var failedId = err.requireModules && err.requireModules[0]; 

        console.log("In err "+failedId); 
         console.log(err); 
       } 
); 

我收到以下错误

GET file:///C:/Users/Nadvi/Desktop/blog.org/assets/js/backbone.js net::ERR_FILE_NOT_FOUND 
req.load @ require.js:2102 
load @ require.js:1784 
load @ require.js:900 
fetch @ require.js:890 
check @ require.js:922 
enable @ require.js:1246 
enable @ require.js:1644 
(anonymous) @ require.js:1231 
(anonymous) @ require.js:136 
each @ require.js:61 
enable @ require.js:1183 
init @ require.js:851 
callGetModule @ require.js:1273 
completeLoad @ require.js:1677 
onScriptLoad @ require.js:1823 
require.js:388 function hasPathFallback(backbone) 
require.js:170 Uncaught Error: Script error for "backbone", needed by: bbr 
http://requirejs.org/docs/errors.html#scripterror 
    at makeError (require.js:170) 
    at HTMLScriptElement.onScriptError (require.js:1844) 
Uncaught Error: Load timeout for modules: tk,mt 
http://requirejs.org/docs/errors.html#timeout 
    at makeError (require.js:170) 
    at checkLoaded (require.js:743) 
    at require.js:769 
makeError @ require.js:170 
checkLoaded @ require.js:743 
(anonymous) @ require.js:769 
setTimeout (async) 
checkLoaded @ require.js:767 
(anonymous) @ require.js:769 
setTimeout (async) 
checkLoaded @ require.js:767 
(anonymous) @ require.js:769 
setTimeout (async) 
checkLoaded @ require.js:767 
(anonymous) @ require.js:769 
setTimeout (async) 
checkLoaded @ require.js:767 
(anonymous) @ require.js:769 

这是怎么回事错在这里我不明白怎么Backbone.js的路径是怎么回事wrong.Please帮助我。

Zazakallah海尔哈纳

Nadvi

Answer 1

你需要看您正在使用的库和检查他们是否登记自己作为AMD模块。代码为这通常看起来像这样：

if (typeof define === 'function' && define.amd) { 
    define(['underscore', 'jquery', 'exports'], function(_, $, exports) { 
     // Export global even in AMD case in case this script is loaded with 
     // others that may still expect a global Backbone. 
     root.Backbone = factory(root, exports, _, $); 
    }); 

我在这里有一个取自骨干。您会看到Backbone取决于模块underscore,jquery和exports。 exports模块是RequireJS内部提供的3个内部模块之一。另外两个内部模块是require和module。您不需要为这些内部模块做任何特殊的事情：它们始终可用。但是，RequireJS需要能够找到名为underscore和jquery的模块。这是你遇到麻烦的地方。你得到的错误是因为backbone.radio，这也叫define，取决于backbone。但是，在您的配置中没有可用的模块，名称为backbone。你有什么是bb但"bb" !== "backbone"所以RequireJS不会看到它的配置，并假设它可以从baseUrl加载和失败。

有一些模块，jQuery的就是最突出的例子一个额外的问题，请致电define用硬编码模块名称，如：

define("jquery", [], function() { 

第一个参数是模块的名字。大多数情况下，调用define时会将依赖项列表作为第一个参数进行调用，并且会推断出模块名称。但是，传递一个字符串作为第一个参数来硬编码模块名称。如果碰上define调用这个样子，你必须通过硬编码名称参考模块。你不能只把jq放在你的paths中，并将它指向jQuery文件。当RequireJS加载jq时，它会找到一个名为jquery的模块，并且会抱怨它们不匹配。

我的建议是：

1. 检查要加载的一切，并检查define电话，因为我上面所解释的。

2. 在你paths配置把通常名下这些库命名为：jquery, backbone, underscore而非缩写。

3. 删除调用define的模块的所有shim配置。 shim仅适用于不调用define的代码。对于调用define的模块，使用shim会导致未定义的行为。 （最好它将被忽略。）

4. 您可以设置一个map配置，如果需要，您可以在自己的代码中使用缩写。 map执行模块名称替换。例如，在下面的示例中，无论何时需要名为jq的模块，都会加载jquery。星号意味着替代品无处不在。

你的配置应该是这样的：

requirejs.config({ 
    baseUrl: "assets/js/", 
    paths: { 
     "jquery"   : "lib/jquery/jquery", 
     // ... 
     "backbone"  : "lib/marionette/backbone", 
     "backbone.radio" : "lib/marionette/backbone.radio", 
     "marionette"  : "lib/marionette/backbone.marionette", 
     // ... 
    }, 
    map: { 
     "*": { 
     jq: "jquery", 
     bb: "backbone", 
     bbr: "backbone.radio", 
     mt: "marionette" 
     } 
    }, 
    shim: { 
     // whatever shims are appropriate 
    } 
});