RequireJSが "パス"設定を無視するのはなぜですか？

Question

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); 
         } 
); 

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); 
       } 
); 

を次のようにAPP/blogapp/BAPである

を次のようにメイン

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'] 
}); 

アプリが/で次のように私が設定を持っているように、salamu-alikum

次のエラーが発生しました

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のパスが間違っていることを理解できません。私を助けてください。

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, _, $); 
    }); 

ここで私が持っているものは、バックボーンから取ったものです。バックボーンは、モジュールunderscore、jquery、およびexportsに依存しています。 exportsモジュールは、RequireJSによって内部的に提供される3つの内部モジュールの1つです。他の2つの内部モジュールはrequireとmoduleです。これらの内部モジュールには特別なことをする必要はありません。常に利用可能です。しかし、RequireJSはunderscoreとjqueryという名前のモジュールを見つける必要があります。これはあなたが問題に遭遇するところです。あなたが得るエラーは、defineを呼び出すbackbone.radioがbackboneに依存するためです。ただし、ご使用の構成には、backboneという名前のモジュールはありません。あなたが持っているのはbbですが、"bb" !== "backbone"なので、RequireJSは設定でそれを見ず、baseUrlからロードでき、それが失敗すると仮定しています。

いくつかのモジュールは、jQueryの最も顕著な例である追加の問題があります、このように、ハードコーディングされたモジュール名でdefineを呼び出します。

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

最初の引数はモジュール名です。ほとんどの場合、defineが最初の引数として依存関係のリストとともに呼び出され、モジュール名が推定されます。しかし、最初の引数として文字列を渡すと、モジュール名がハードコーディングされます。このようにdefineの呼び出しを実行する場合は、のハードコードされた名前でモジュールを参照する必要があります。 pathsにjqを入れてjQueryファイルを指すだけではいけません。 RequireJSがjqをロードすると、jqueryという名前のモジュールが見つかり、一致しないと不平を言うでしょう。

私の推奨事項は以下のとおりです。

1. は、あなたがロードされているすべてを点検し、私は前述したようにdefine通話をご確認ください。jquery, backbone, underscoreではなく、略称：あなたのpaths構成で

は、これらのライブラリが指定される名前の下に 通常名を置きます。

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 
    } 
});