yeoman webapp で複数ページでAMDする方法

最近仕事でもyeomanを使うことが多くなってきた。というか開発スタイルをできるだけ画一化したいので必要なことはyeoman上で片付けてしまおうという気持ちがまあ強い。

べつにyeomanじゃなくてもいいんだけど、他にもっとよいツールが思いつかない状態なので。bracketsやDreamweaverなんかも試してみたんだけど個人的にはyeoman+vimがWebアプリもWebページも作りやすかったりしてます。bowerやnpmでモジュールの導入が楽なのとgrunt様が強力なおかげですね。

yeomanはgeneratorというプロジェクト生成モジュールを使うことでいろいろな開発に適したプロジェクトを生成することができる。公式にもいっぱいあるのだけどGetting Startedで使われてるgenerator-webappが一番ポピュラーだろう。

webappはいい感じのhtml、css、jsのセットを出してくれるんでよく使ってた。今まではWebサイトやシングルページの小さいアプリを作るときに使っていたんだけど、アプリの規模を大きくして複数のページで違うjsプログラムを使うようになってちょっとハマった。requirejsのビルド設定がうまくいかなかったのである。

webappはgrunt-contrib-requirejsをつかってgrunt build時にrequire.config()が記述されているmain.jsを起点にdefineされたモジュールを結合、minifyしてくれる。なんとも便利なんだけど、これが2つ以上のページで異なるrequireをしたいときにはそのままじゃうまくいかない。

例えば、index.htmlでmain.jsを使ってa.js, b.js, c.jsをrequireする。一方でabout.htmlではmain2.jsでb.js, c.js, d.jsをrequireするといったことをやろうと思ってもうまくいかない。about.htmlで

 <script data-main="scripts/main2" src="bower_components/requirejs/require.js"> 

みたいにしても、期待通りにビルドされない。これって簡単にできないと複数ページになるアプリが書けねえじゃんと思ってけっこう本気で調べたけどかなり時間がかかった。。まあ結果的にrequirejsやgrunt-contrib-requirejsのことがだいぶ判りましたよとほほ。

で、結果としてできたのがこちらのgistにおいてあるコードです。

必要なのは主にGruntfileのビルド設定。

ポイントは152行目のuglifyのブロックと156行目以降のrequirejsのブロック。

まずrequirejsでdist1、dist2という2つのbuild.jsオプションを記述。それぞれmain.jsとmain2.jsを割り当てる。ページが増えてrequireを記述するjsファイルが増えていけば同じようにdistを増やしていく。

この発想はなかった。ボクはoptionのほうでなんとかするもんだと思い込んでいてrequirejs-multipage-shim-tutorialなんかを参考に設定いじりまくってうまくいかなかった。のでこれ見たときコロンブスの卵すぎて鼻水出そうになった。どっかのstackoverflowでこれ見つけたんだけどリンク失ってしまった。ありがとうどっかのだれか！

dist1, dist2の設定により、これでmain.js、main2.jsはそれぞれよろしく結合されることになるんだけど、実際にビルドしてみるとmain2.jsのほうがminifyされない。調べてみるとmain2.jsの存在がuglifyに伝わってない感じだったのでwebappのGruntfileでは省略されているuglifyのブロックを追加してmain.js, main2.jsを明示した。するとmain2.jsもoptimizeされるようになった。ディ・モールト良し！

この方法だと、requireの制御が増えるごとにGruntfileを編集する必要があって、もう少しうまくタスクを組んで自動化できないかなあと思うのだけど、まあそんなにめんどいことじゃないからとりあえずこれでいいか、ということにした。

何よりこれで何日か悩んでた問題が解けたし、webappで開発できるアプリの幅が少し広がったので新たな欲が湧くまでは当面これでいいことにした次第です。

つーかもっとgenerator増えないかなあ。yeomanはもっとニッチなgeneratorが増えたほうが面白いことになると思う。generatorハッカソンとかやろうかなあ。誰も来ないかもなあｗ