React+StoryBook+AdminLTEでのComponent開発環境(4)
前回
なんとかstorybookと連携できたというところ。
今回
AdminLTEを本格的に入れ込んでいく。あと自分がよく使う3rd party moduleのたぐいも入れ込んでいく。その際にどんな苦労があったか、的な話。
そろそろ開発環境構築に一区切り付けたいなあ。いやどうせredux周りの実装を後で手入れすることになりそうなんだけど。それはそれだ。
jQueryとの戦い
しかし今回あまりに戦いすぎたせいかあんまり記録を残してなかった。
いや、ReactにしてもAngular2にしても、1からScratchで作っていく分にはそれほど苦労はないんだけど、既存のjQueryで実装されたjsを置き換えていこうとすると思った以上に面倒な点があったので、書きながらあーでもないこーでもないという期間が長かったのです。
具体的にどこがbottlenetckだったかといえば、それはもちろん、jQuery。
jQueryって基本的にはglobal変数である$やjQueryという変数を用意して、そこに値やmethodをどんどんつなぎ込んでいったlibraryとして存在している。で、これを外から呼び出してprototypeで自分のclassを作っているようなlibraryはいいんだけど、僕も僕もーと$.xxxxのようなmethodを追加していくタイプのlibraryがある。こいつらが面倒。
AdminLTE使っていると具体的にはjQueryUIとAdminLTEがやっかいだった。
何故やっかいになるかというと、webpackのせい。webpackでbuildして生成されたjsは基本的にscopeが分かれるようになっていたはずなので、jQueryの原則的に$というglobal変数があるという前提と真っ向からぶつかる。
それでもwebpackでbuildするscriptの中にjQueryを埋め込むというのなら普通にimportしてもいいし、imports-loaderとか使ってwebpackでbuildする時のglobal変数を定義する仕組みを使えばうまく動く。
でも移行処理というのを考えると一筋縄には行かない。というか全部一気に移行できるならいいけど、今そんな時間ないよ！ みたいな条件下でちょっとずつ移行していこうとなると、どうしたものか。
で、最初はexports-loaderとか使えばglobal変数として定義できるよ、という話があったのでこれを使って解決しようとしてみた。
でも残念ながら僕にはjQueryだけのexportはできたけどその中にAdminLTEやjQueryUIを入れ込む方法がわからなかった。jQueryをimportしたjs fileの中にAdminLTEやjQueryUIもimportすればうまくmergeされるのかなと思ったけどどうも思ったように動かない。
原因を調べたいところだったけど、そこにcostかけるのも実は本筋とはいえない。
何故かといえば、実のところReact使えば今jQueryで書いているdom操作周りってほぼcomponentの中の処理に置き換えていけるから。必要なのはcssだけ、みたいなことになる。とするとjQueryとの共存に力を注ぐのは筋が違うよなあという話になるわけで。
結局どうしたかというと、/legacyというdirectoryを作ってそこに必須のjQuery関連のmoduleを配置しておくことにした。つまり別扱いということ。
そのうちReactへの移行が進めば、この/legacyの中のものが消えていく、といいなあ、という願望。
で、最終的な結果
├── config ├── legacy ├── less ├── localize ├── pages ├── scss └── src
こんな感じに分割。/legacyはそのまま、jQuery系列のfileが入っているし、configはwebpack関係、lessとscssはcssを生成するためのそれぞれのcode、/localizeは時折3rd partyから落としてきた者を手元でいじって使うことがあるから、それらをわけておくもの。
あとはmakefileを通して使えば普通に開発できそう。
具体的な使い方はどこかで説明した方がいいのかなあ。いや自習用だしなあ。特に教材というわけでもないからいいか……。
知り切れトンボ感あるけどこれで一区切り。v0.1.3として保存。
次はたぶんredux周りの組み上げ方を修正する気がする。
