Posts tagged with require.js


その2から大分間が空いたけれどもその3。 とはいうもののその2でjquery方式のビルド方法分かったんだからそれ使えば終わりじゃないか。確かにそうだ、いやいや待ってほしい、よーく考えてほしい。 投稿してから時間空きすぎててもうあんまり覚えてないが、どう考えても一般人が気軽に行えるような内容ではない。なんで自作したjavascriptをさっとぱっと公開したいだけなのにあんな面倒なコーディングルールや環境構築をまるっと全て整備しなければいけないのか。 辿り着いた答えはwebpack。どちらかというとCommonJSよりのビルドツールだがAMDにも対応してくれる。 正直なところ初めからwebpack導入しておけば、CommonJSでもAMDでも好きな方で書いて最終的に1つのグローバル変数としてモジュールを吐き出すということが簡単にできる。 そしてwebpackだとAMD(あるいはCommonJS)の機能を含めた形でビルドしてくれるからrequire.jsのような外部jsファイルを読み込む必要がない。これが結構重要。 「このライブラリを使うにはrequire.jsが必要です。」 「このライブラリはscriptとして読み込むだけで使えます。」 ライブラリを使おうと思ってるページで既にrequire.jsを使っているならrequire.js必須と言われてもなんとかしてくれそうだが、そうでない大部分のページでは読み込むだけで使える方が楽に決まっている。 というわけでとにもかくにも実際に試してみたのがこちら。 言わずと知れたライフゲームを好きなところにポンッと設置するためだけのjavascriptモジュール。なんでライフゲームかと言うと最近みたライフゲーム動画が面白かったから。 対応ブラウザであればこの直下あたりに黒と緑の点滅するセル群が表示されているはず。 var init = function() {  var main = new LifeCanvas(…

ブラウザ側でのrequire.js小話。 グローバル汚染とjsファイルの参照関係をいい感じに解決してくれるrequire.js。htmlファイルにscriptタグでjsファイルを書きまくる開発なんて今となってはもう考えられない。 そんなrequire.jsだけども、ちょっとややこしいのが循環参照の解決方法。 そもそもjavascriptに限らず循環参照させること自体間違っているんだという主張はもちろん一理ある。require.js公式の循環参照に関する説明文にもこんなことが書いてある。 Circular dependencies are rare, and usually a sign that you might want to rethink the design. はい、ぐうの音も出ません。でも、でもでもどうしても循環参照が必要となる場面は出てきてしまうのである。雨が降ればキノコが生えてくるように、コードが増えればやつらも生えてくるのである。 いろいろ試してハマってまた試してを繰り返してやっと循環参照の挙動が見えてきたので、その全容をここに残しておきたい。…

その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系ライブラリがなくても問題なく利用できる。…