爲什麼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 
    } 
});