webpackとpugとriotで作ってみる。
テスト？何それ！状態ですが。
フォルダ構成
+src/
+js/
+index.js # エントリポイント
+index.html.pug # エントリポイントに対応するindex.htmlに変換されるpug
+app.tag.pug # pugで書いた、riotのタグ
+publish/
+index.html # 生成されたhtml
+js/index.js # riotのtagやら一式のjs
npm run xxx
- clean : clean output directory
- dev : 開発用(watch + server)
- rebuild : clean + build
- build : ビルドする。
- server : browsersyncでサーバを起動する。(http://localhost:3000)
詳細は、https://github.com/uk-taniyama/webpack-pug-riot-project-test。
webpack.config.jsのポイント
loaderの指定が、文字列じゃないといけないとこがあったり謎。
常に文字列でもいいけど、複雑なのだと大変なので、webpack-stringify-loadersで文字列に変換させる。
webpack-stringify-loadersがStringまたは、Array。
Objectも大丈夫にパッチを作ってpull-requestをしてみた。
現状、Object->[Object]で渡している。
でも、あまり意識しないように、 webpack-stringify-loadersをかますので、Objectでもいいじゃんと思う。
pugの結果をriotjsに渡すには、pretty=true,export=false。
prettyがないと、構文が解析できない。
export=falseでhtmlがそのままわたるようにする。
pug-html-loaderのpluginにpug-plugin-no-yieldを指定。
pugのキーワード「yield」を無視して、riotにわたるようにする。
＃でも、「yield.」を使えばいいので、別にいらない。
＃作った後で動作確認していたら、気づいた......
おまけ
- いろいろあったけど、ようやく遊べるようになった......まだ、sassとかtestとかあるけど、その辺はたぶんはまらない。