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

Carpe Diem

備忘録。https://github.com/jun06t

RequireJS(その2)

JavaScript
RequireJS(その1)で使い方を学びましたが、これだとjQuery, UnserscoreJSは使えません。 「jQueryやUnderscoreJSだけ使えないってどういうこと!?」とずっと悩んでいたのですが、実はconfigで設定しないとこの2つは使えないタイプなのです。 まずは使い方を説明して、他でも同じタイプのライブラリに遭遇した場合のために後のほうで補足で「どうして普通の使い方で使えないのか」を説明します。 jQueryの場合 フォルダ構成は以下のようにします。 js ├ app.js ├ require.js └ libs   ├ jquery-min.js   └ a.js 依存関係は
jquery-min.js ← a.js
とします。 ポイントはmain関数であるapp.jsにconfigをつけることです。 app.js
require.config({
    paths: {
        jquery: 'libs/jquery-min'
    }
});

require(['libs/a']);
また a.js には callback の引数にエイリアス($)をつけます。 a.js
define(['jquery'], function($) {  // pathsの設定でjqueryとだけ書けばOK
    var foo = $('

'); console.log(foo); })

こうすればきちんとエイリアス($)が使えるようになります。configのない前回のやり方ですと、仮にエイリアス($)をつけても undefined としか表示されません。 ◆UnderscoreJS こちらも config が必要です。また paths だけでなく、shim というオプションも必要です。 フォルダ構成は以下のようにします。 js ├ app.js ├ require.js └ libs   ├ underscore-min.js   └ a.js app.js
require.config({
    paths: {
        underscore: 'libs/underscore-min'
    },
    shim: {
        'underscore': {
            exports: '_'  // エイリアスを書く
        }
    }
});

require(['a.js']);
a.js
define(['underscore'], function(_) {
    var foo = [1, 2, 3];
    _.each(foo, function(num) {
        console.log(num);
    });
})
これで使えるようになります。 ◆どうして普通の使い方ではできないの? これはAMD(Asynchronous Module Definition)がキーワードです。 ・AMDに対応していない → shim 設定が必要 ・AMDに対応してる → shim 設定が不要 UnderscoreJS はAMD非対応プラグインであるため、shim という「AMD非対応プラグインに対する依存設定」が必要となりるため前述の config が必要となります。 もう一つ global に名前を持つモジュールの場合は path configuration が必要らしいです。参考サイトには
Not a bug. 
jQuery exports itself as a named module.
This means you must have it as a path configuration option.
とあります。 jQueryは「$」、UnderscoreJSは「_」を持つので、どちらも paths が必要となります。 ソース: How to load Underscore library with RequireJS? RequireJs only loading JQuery when I configure the path option RequireJSでjQueryを使う方法をまとめてみた Re: RequireJSを使うのを止めた理由