Edited at

Riot.js 2.2 情報まとめ

More than 3 years have passed since last update.

Riot.js 2.2 情報まとめ

とりあえず、気付いたものをメモしていきます。随時更新。


本家

riot960x.png


開発情報


インストール

riotはツールごとにリポジトリが分かれていません。


  • ブラウザ用のライブラリ

  • コンパイラ

  • CLIツール

の3つが一緒くたになっています。各人のスタイルに合わせて、インストールしましょう。(追記・次のv2.3に向けて、サブモジュール化が進んでいます)


ライブラリとして

CDNから最新版。他のパターンはこちら


  • コンパイラなし: https://cdn.jsdelivr.net/riot/2.2/riot.min.js

  • コンパイラあり: https://cdn.jsdelivr.net/g/riot@2.2(riot.min.js+compiler.min.js)

npm経由で。Browserifyを使う場合など。

$ npm install --save riot

bower経由で。

$ bower install --save riot


CLIツールとして

コマンドラインから、 riotを使う場合は、グローバルにインストール。

$ npm install riot -g

使い方は次の通り。

# 同一フォルダ内にコンパイル

$ riot some.tag

# 他のフォルダにコンパイル
$ riot some.tag some_folder

# 他のフォルダにファイル名を指定してコンパイル
$ riot some.tag some_folder/some.js

# 特定フォルダ内のファイルをすべてコンパイル (個別に)
$ riot some/folder path/to/dist

# 特定フォルダ内のファイルをコンパイルしてひとつに結合
$ riot some/folder all-my-tags.js


コンパイル


ビルドツールで


APIで

var riot = require('riot');

var js = riot.compile(source_string);


Browserifyの場合

Browserifyのトランスフォームがあるので、これを使います。

こんな感じのJavaScriptのファイルがあったとして...

// src/app.js

var riot = require('riot');
require('./components/custom-form.tag');
require('./components/custom-list.tag');

riot.mount('custom-form', { opt1: 'aaa', opt2: 'bbb' });
riot.mount('custom-list', { opt1: 'ccc', opt2: 'ddd' });

gulp経由でBrowserifyを使う際の gulpfile

// gulpfile.js

var gulp = require('gulp');
var browserify = require('browserify');
var riotify = require('riotify');
var source = require('vinyl-source-stream');

gulp.task('browserify', function(){
browserify({ entries: ['src/app.js'] })
.transform(riotify, { template: 'jade' }) // pass options if you need
.bundle()
.pipe(source('app.js'))
.pipe(gulp.dest('dist/'))
});

CoffeeScriptやJadeを使う場合は、riotifyにオプションを渡す必要があります。


  • CoffeeScript: { type: 'coffeescript' }

  • Jade: { template: 'jade' }

  • 両方: { type: 'coffeescript', template: 'jade' }

あと、実際に使用する場合は、uglifysourcemapsも必要になるはず。(上記のgulpfileは説明のためにかなり単純化しているので)


テスト関連


ベンチマーク

裏を取ってないですが、こんな感じという投稿あり。

Mithril < Vue < Backbone = Riot < React << Angular < Ember


各種情報


サンプル

そのほか、本家のREADMEの最後に掲載されるようになりました。


チュートリアル


Q & A


紹介記事