RequireJSでのライブラリの依存設定
RequireJSを使って以下のようにjQuery-UIを利用するコードを記述したところ、 JSエラーが出た。
define([ '../bootstrap/bootstrap', '../jquery/ui/jquery-ui.custom', '../jquery/ui/jquery.ui.widget', '../jquery/ui/jquery.ui.mouse' ], function(){ .... }); });
Uncaught TypeError: Object function ( selector, context ) { // The jQuery object is actually just the init constructor 'enhanced' return new jQuery.fn.init( selector, context, rootjQuery ); } has no method 'widget' jquery.ui.mouse.js:21
jquery.ui.mouse.jsをロードするタイミングで依存しているjquery.ui.widgetがロードされていないらしい。 Chromeのdeveloper-toolで見るとその時のロード順序は以下のようになっていた。
jquery.ui.mouse.jsが先にロードされてしまっている。 ただこのロード順序は非同期のため、その時によってバラバラ。運がよければエラーにならなかったりする。。
依存するライブラリを必ず読み込んだ後にロードするようには以下のようにRequireJSのshim設定を定義する必要がある。
<script> var require = { shim: { '../jquery/ui/jquery.ui.mouse' : { deps: [ '../ui/jquery-ui.custom', '../ui/jquery.ui.widget' ] } } }; </script>
depsの所でjquery.ui.mouseはjquery-ui.customとjquery.ui.widgetに依存しているという情報を定義している。
更にdefine関数の呼び出し箇所で依存しているファイルの記述を削除。shim設定しているため自動で読み込んでくれる。
define([ '../bootstrap/bootstrap', '../jquery/ui/jquery.ui.mouse' ], function(){ ... });
この状態で画面のロードを行うとjsエラーは発生しなくなった。
'../ui/jquery-ui.custom', '../ui/jquery.ui.widget' が '../jquery/ui/jquery.ui.mouse' よりも先にロードされている。常に。