読者です 読者をやめる 読者になる 読者になる

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'
    },
};