pugで書くRiotの開発環境メモ

はじめに

Riotが動くことが目的なので，それ以外の設定は手抜きです．
特にスタイルなんてほぼ書いていないので，そこら辺は個人の好みでカスタマイズしてください．
Riotのバージョンは3.7.3（新しめなはず）

ソース

1. git cloneしたらyarnしてyarn watchしてください．
2. live-serverが起動するので，コードをいじって保存すれば自動でコンパイルし，ブラウザがリロードされます．

構成

root
  ├ dist
  │  ├ js
  │  │  └ index.js
  │  └ index.html
  └ src
    　├ js
  　  │  └ index.js
  　  ├ pug
  　  │　└ index.pug
  　  └ tag
　   　  └ app.tag

いじるのはsrcフォルダの中にあるindex.js, index.pug, app.tagの3つのファイルになります．

npm scriptでやってること

• pugはpug-cliでhtmlに自動変換．
• tagはtag-pug-loaderを通した後，babel-preset-es2015-riotによってjsに自動変換．
• jsも同じくbabel-preset-es2015-riotで自動変換．
• ファイルに変更があったらブラウザをリロード（live-server）

動作確認

ボタンを押すと，タイムスタンプ的な時刻が羅列されるようなコードになっています．
そのままでもRiotのクリック検知やeachなどの文法の最低限の把握には使えるかもしれない．（？）

コードと軽い説明

pugでbodyの中に書いたappタグにapp.tagをマウントしています．
マウントはindex.jsのriot.mount('app')の部分で行っています．

index.pug

doctype html
html(lang="ja")
	head
		meta(charset="UTF-8")
		meta(name="viewport", content="width=device-width, initial-scale=1.0")
		meta(http-equiv="X-UA-Compatible", content="ie=edge")
		title Riot
	body
		app
		script(src="js/index.js")

index.js

import app from '../tag/app'

console.log('index.js')

riot.mount('app')

app.tag

app
	div
		h1 app.tag
		button(click='{clicked}') count: {this.list.length}
		ul
			li(each='{item, index in list}') {index}: {item}

	style.
		div {
			background: cyan;
		}
		button {
			font-size: 1.5rem;
		}

	script.
		this.list = []

		this.on('mount', () => {
			console.log('app.tag mounted', opts)
		})

		clicked(e) {
			this.list.push(new Date().toString())
		}