Posts tagged with r.js


その1で最終目標と掲げたjqueryの魔法のビルド方法をめげずに解読していたらなんか見えてきたので先にその解説。 ビルドの鍵はこのファイル。タスクランナーとしてGruntが登場するけど、ビルドの心臓部はrequire.js(r.js)で行われていることが冒頭部から分かる。 じゃあその設定はどうなっているんだとconfigのプロパティを眺めてみると、onBuildWrite: convertなるものが設定されている。 実はこれr.jsの機能で、ビルドした内容からさらに変換を加える事ができるらしい。つまりこれが設定されていなければビルドされたjqueryファイルにはdefineやrequireが普通に登場する。 さらに行を下って行くと、convert関数の定義がされている。 正規表現使いまくって何やら変換しているということは分かる、分からない、試してみたほうが速い。 例えばこんなファイルを用意する。 [bbb.js] define([], function(){ var bbb = { b: "b", }; return bbb; }); 内容には全く意味は無い、とにかくこれをjqueryと同じonBuildWrite: convert設定の基でビルドしてみる(Grunt関連っぽい部分とrdefineEndの定義をファイル冒頭から持ってくれば普通にr.…

ネームスペースすら存在しないjavascriptに秩序と安寧をもたらす一筋の光。AMD(以下require.jsを想定)との出会いにより、javascriptは文字通り大舗装されていった。 なんと言ってもJavaやC#的なクラス(モジュール)単位でのファイル分割と、ファイル間の依存関係を一挙に解決してくれる恩恵は絶大であった。 さらに嬉しいことに、ビルドする必要がなくブラウザで即動かすことができるというjavascriptの利点はそのまま残る。そして公開するタイミングになったらr.js使ってビルド圧縮と至れり尽くせり。 こうして全てのフロントエンドjavascriptに平和は訪れたのである、めでたしめでたし・・・と最近までは思っていた。 AMDで作った自作javascriptをライブラリとして公開するにはどうすんの??? 困った、困った困った。 何がしたいのかと言うと、jqueryみたいにAMDで製造をするけど、公開時には$に全ての機能が集約されているという状態にビルドしたい。 とりあえずお手本としてjqueryがどうやってビルドしているのか研究しようと思うも、正直全く理解できない。というのも、r.jsとかでモジュール結合して終了という単純なものではなく、結合してからさらに別ファイルの記述をconcatするとかいろいろしていて全容がなかなか掴めない。 極めつけは、githubのそれぞれのソースファイルではdefineやrequireが登場しているのに、公開されているjquery.jsの中身にはそれらしき記述が登場しなくてAMD系ライブラリがなくても問題なく利用できる。…