[JavaScript] JSPM + Riot.js v3 セットアップ覚え書き

  • このエントリーをはてなブックマークに追加

なんとなく覚え書き的なアレです。
Riot.js v3がつい先日リリースしたのですが、公式サイトもまだv2の内容な上、JSPMと併せて使う方法がよくわからなかったので、自己解決してまとめ。

以下簡単な手順です。参考にどうぞ。

JSPMインストール

細かい説明は他のサイトを参照してください。

$ npm install jspm -g
$ npm init
$ jspm init

Riot.jsのインストール

今ならv3が入ります。

$jspm install npm:riot

loader plugin作成

tagファイルをimportしたときにコンパイルしてくれるプラグインを作成。

v2用のでは正常に動かないのでこちらを参考にv3用を作成。
jspm-riot

riot-compilerインストール

riotの依存モジュールなのですでに入ってるはずですが手抜きする。

$ jsom install npm:riot-compiler

loader本体はこちら。
riot-tag.js

import * as compiler from 'riot-compiler';

export function translate(load) {
    return compiler.compile(`import * as riot from 'riot';\n` + load.source);
};

使い方

import 'app.tag!riot-tag';

ひとひねり

お好みでconfig.jsいじって

map: {
    ...
    "tag": "riot-tag"
},
import 'app.tag!';

正直言って、tagで済ましてしまうのは好きじゃないので使いませんけど。

テストコード的なもの

雑に作りました。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>テストページ</title>
    <script src="jspm_packages/system.js"></script>
    <script src="config.js"></script>
</head>
<body>
    <div data-is="app"></div>

    <script>
        System.import('main');
    </script>
</body>
</html>

add.tag

<app>
    <h1>テストだよ</h1>
    <button onclick={ onClick }>クリックして!</button>

    <script>
    this.message = opts.message;
 
    onClick(e) {
        console.log(`Hello, ${this.message}`);
    }
    </script>
</app>

riotのimportはv2と違って、こういう指定しじゃないといけない模様。

main.js

import * as riot from 'riot';
import 'app.tag!riot-tag';

riot.mount('app', { message: 'Riot.js' });

最後に

これから導入するなら、どうしてもv3にしたかったのですが、その理由としてはカスタムタグを静的HTMLに突っ込むとHTMLバリデータに引っかかってしまうからでした。
v2ではカスタムタグの代替としてriot-tag属性がありましたが、結局バリデータにひっかかるので不満です。
しかしv3ではriot-tag属性に代わり、data-is属性で代用できるようになり、普通のカスタムデータ属性なのでバリデーションが通過できるんですよね。
その他はまだ触り始めでよくわからんので、また機会があったらなんか書きますです。

  • このエントリーをはてなブックマークに追加

SNSでもご購読できます。




コメントを残す