LoginSignup
3

More than 5 years have passed since last update.

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

Last updated at Posted at 2017-10-02

はじめに

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.jsriot.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())
        }

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3