Carpe Diem

  Top > スポンサー広告> JavaScript > RequireJS(その2)  

スポンサーサイト

-- - --/-- [--] - --:--

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

RequireJS(その2)

2013 - 11/18 [Mon] - 10:10

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を使うのを止めた理由

コメントの投稿





管理者にだけ表示を許可する

 | ホーム | 

プロフィール

Cicatrice

Author:Cicatrice
備忘録

検索フォーム

カテゴリ

最新記事

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。