Riot.js 2.2 情報まとめ #JavaScript

Riot.js 2.2 情報まとめ

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

本家

開発情報

インストール

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

コンパイル

ビルドツールで

gulp-riot - gulpプラグイン
grunt-riot - Gruntプラグイン
riotjs-loader - WebPack用のモジュールローダ

APIで

var riot = require('riot');

var js = riot.compile(source_string);

Browserifyの場合

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

riotify

こんな感じの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/'))
});