RequireJS加載依賴不一致

我有一個jQuery插件，它依賴於先加載的jQuery。我使用shim和require([])來確保jQuery首先被加載。有時應用程序的工作原理，但通常它不會做，給我以下錯誤：RequireJS加載依賴不一致

Uncaught TypeError: Object [object Object] has no method 'noUiSlider'

...這是jQuery的指示不被第一次加載的。我究竟做錯了什麼？

這裏是我的應用程序的主腳本：

requirejs.config({ 
    "baseUrl": "app/", 
    "paths": { 
     "app": "./app", 
     "threejs" : "../lib/three.min", 
     "jquery" : "../lib/jquery", 
     "jquery.nouislider.min": "../lib/jquery.nouislider.min" 
    }, 
    "shim": { 
     "jquery.nouislider.min": { 
      deps: ["jquery"], 
      init: function($) { 
       return this; 
      } 
     } 
    } 
}); 

require([ 
    "jquery", 
    "jquery.nouislider.min", 
    "threejs", 
    "Scene" 
], 
function ($) { 
    var glScene = new Scene(); 
    glScene.clockStart(); 

    $(function(){ 
     var slider = $("<div></div>"); 
     slider.attr("id", "sample-minimal"); 
     $("body").append(slider); 
     $("#sample-minimal").noUiSlider({ 
      range: [0, 100] 
      ,start: [20, 80] 
      ,connect: true 
     }); 
    }); 

    function onWindowResize(event) { 
     glScene.windowResize(); 
    } 
});

來源

2014-01-10 Josh S.

爲什麼你認爲，這個錯誤，你提供的，表明jQuery不會首先加載？不是一個事實，那$(function(){正常工作證明相反？

不管怎樣，試試這個：

requirejs.config({ 
    "baseUrl": "app/", 
    "paths": { 
     "app": "./app", 
     "threejs" : "../lib/three.min", 
     "jquery" : "../lib/jquery", 
     "jquery.nouislider.min": "../lib/jquery.nouislider.min" 
    }, 
    "shim": { 
     "jquery.nouislider.min": { 
      deps: ["jquery"], 
      exports: '$' 
     } 
    } 
}); 

require([ 
    "jquery.nouislider.min", 
    "threejs", 
    "Scene" 
], 
function ($) { 
    var glScene = new Scene(); 
    glScene.clockStart(); 

    $(function(){ 
     var slider = $("<div></div>"); 
     slider.attr("id", "sample-minimal"); 
     $("body").append(slider); 
     $("#sample-minimal").noUiSlider({ 
      range: [0, 100] 
      ,start: [20, 80] 
      ,connect: true 
     }); 
    }); 

    function onWindowResize(event) { 
     glScene.windowResize(); 
    } 
});

更新1：基本例如：

的index.html

<!doctype html> 
<html> 
    <head> 
     <link href="./jquery.nouislider.css" type="text/css" rel="stylesheet"> 
    </head> 
    <body> 
     <div id="stage"></div> 
     <script data-main="main" src="require.js"></script> 
    </body> 
</html>

main.js

require.config({ 
    paths : { 
     jquery : 'jquery-2.0.3', 
     'jquery.nouislider' : 'jquery.nouislider' 
    }, 
    shim : { 
     'jquery.nouislider' : {deps : ['jquery'], exports : '$'} 
    } 
}); 

require(['jquery.nouislider'], function($) { 
    $(function(){ 
     $("#stage").noUiSlider({ 
      range: [0, 100] 
      ,start: [20, 80] 
      ,connect: true 
     }); 
    }); 
});

UPDATE2：優先選項：

此外，您可能需要使用優先選項：

priority: An array of module/file names to load immediately, before tracing down any other dependencies. This allows you to set up a small set of files that are downloaded in parallel that contain most of the modules and their dependencies already built in. More information is in the Optimization FAQ, Priority Downloads.Note: resources loaded by loader plugins (like 'text!template.html') cannot be specified in the priority array: the priority mechanism only works with regular JavaScript resources.

應該用這樣的：

paths : { 
    .... 
}, 
shim : { 
    .... 
}, 
priority : ['jquery']

來源

2014-01-10 19:12:02

問題不是jQuery根本不加載。問題是插件在jQuery加載之前加載。請記住，問題是間歇性的（即有時可行，有時不起作用）。 –

@josh查看更新的示例。這個工作得很好。 –

啊哈！看起來像'優先：['jquery]'做了詭計。謝謝！ –

你使用RequireJS 1.x.解決方案：升級到2.x.

有證據表明你正在使用1.x的：如果設置priority的伎倆（如你在對方的回答評論寫），這就是證據，你正在使用1.0版本，因爲priority是removed from the 2.x series。

此外，shim是introduced with 2.x所以，因爲您使用的是1.x版本，您的shim配置僅被RequireJS忽略。這解釋了您遇到的錯誤行爲，您的shim被忽略，這意味着jquery和jquery.nouislider.min可以按任何順序加載。墊片你看起來很好，因爲它是。它被忽略了！

來源

2014-01-10 21:23:56 Louis

RequireJS加載依賴不一致

回答

相關問題