突然の難関
簡単に行くかと思いきやいきなりつまずく。
とりあえずいままでの構成
- dest
- アプリのhtml (手書きｗ)
- アプリのjs (自動変換)
- src
- アプリのjsx
- node_modules
- react
- react-tools
- react-bootstrap (new!)
- bootstrap (new!)
destディレクトリにhtmlがあるのがアホっぽいが実験なので勘弁してくれ。
htmlのjavascriptタグで
<script src="../node_modules/react/dist/react.min.js"></script>
とやって読み込み、
jsx --watch --harmony src/ dest/
とやって変換してブラウザでドン！
動いたー
である。
が、同様の方法で
<script src="../node_modules/react-bootstrap/dist/react-bootstrap.min.js"></script>
とやるとjsxがお怒りになられる。あいつ(jsx)はコンポーネントクラスの中身を気にする存在だったのか……と。お前(jsx)中身知らなくても変換できるだろ……と。
jsxからreactは見えてreact-bootstrapは見えないってのも罠感ある。
ちなみにjsxも$PATHにreact-tools/binを入れてるから動いてるところある。微妙ｗ
なんとなくnpmでグローバル領域にガンガンjs置いていくことに抵抗があるのだがこの感覚こそ最大の敵かも分からん。アンインストールの仕方よく分かってないし……
作戦１ JSXTransformerを使う。
たぶんいちばんシンプル。
ガンガン書いてたES6の構文がどうなるか気になるがたぶん平気だろう。
パフォーマンスはきっと落ちるが、そもそも実験だしどうでもいい？
作戦２ 諸々をnpm -gオプションで入れなおす
入れなおせばたぶん見れるようになるだろ。jsxにパス通さんでもよくなるし。
作戦３ jsを合成するヤバイジツを使う
ほいでgulpかなんか入れて諸々コミコミのデカイjsを一気にビルドする。
まぁ環境はクリーンだろうけど、労多くして功少なしか。
結局gulpをグローバルに入れそうだし。
というわけで作戦２で行く決断を下した……
結論
コンパイル？出来た。しかし問題はそんなことではなかった。
元々Reactで作っていたコードに、
<button hogehoge>fugafuga</button>
というのがあり、これを
<Button hogehoge>fugafuga</button>
と、閉じタグをBootstrapコンポーネントに変換していなかったためにコンパイルエラーが出ていたのだ！
ヤバイ！
そしてこの経験は恐らく他の人の役に立たない！