require.jsとdata-main属性
require.jsを使っていて少しハマったのでメモ書き。
requre()関数をトップレベルのHTML(moduleを宣言していないHTML)に使用する場合、 data-main属性でconfigファイルを読み込もうとすると失敗します。
このような場合です。
<script src="require.js" data-main="require-config.js"></script> <script> require([ 'jquery', ], function ($) { console.log($); }); </script> // require-config.js requirejs.config({ paths: { jquery: 'jquery-1.8.2.min' }, });
これはrequire.jsファイルを読み込んだ後、data-main属性に指定されたファイルを読み込む前にrequire()関数が評価されてしまうためです。
configが読み込まれるまでrequire()関数は待ってくれるはずだと勝手に思い込んでいました。
回避策としては、ドキュメントにも書かれているようにrequire.jsを読み込む前にあらかじめconfigを設定しておけばokです。
事前に設定する場合は、requireという変数に設定項目をオブジェクトとして渡しておきます。
<script src="require-config.js"></script> <script src="require.js"></script> <script> require([ 'jquery', ], function ($) { console.log($); }); </script> // require-config.js var require = { paths: { jquery: 'jquery-1.8.2.min' }, };