23
Oct 2016
by
佐々木 亜里沙
とりあえずRiot.jsをはじめるためのメモ
Step1. プロジェクトを作成する
riot-sampleなど適当に
Step2. npmで必要なものをインストールする
$ npm init -y
$ npm install jspm@beta --save-dev $ npm install superstatic --save-dev #webserver
Step3. package.jsonのscriptsを編集する
...
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"jspm": "jspm",
"start": "superstatic"
},
..."jspm": "jspm" → jspm実行のエリアスを追加
"start" : "superstatic" → start時はsuperstaticを実行するようにする
jspmは予約されているコマンドではないので、実行時は 「npm run ... 」と追記する
$ npm start #superstaticを実行
$ npm run jspm init
のように実行できる
Step4. jspmで必要なものをインストールする
$ npm run jspm install riot $ npm run jspm install tag #systemjs-riotが動的にtagファイルをコンパイルしてくれる
Step5. riot.tag作成
tags/app.tag
<app> <p>Hey!</p> </app>
Step6. index.js作成
import riot from 'riot';
import 'tags/app.tag!';
riot.mount('app');Step7. index.html作成
<!doctype html>
<html>
<meta charset="utf-8">
<script src="jspm_packages/system.js"></script>
<script src="jspm.config.js"></script>
<body>
<app></app>
<script>
SystemJS.import('index.js');
</script>
</body>
</html>こんなディレクトリ構成になります
riot-sample ├─jspm_packages ├───system.jsなど ├─node_modules │ ├─tags ├───app.tag ├─index.html ├─index.js ├─jspm.config.js └─package.json
で
$ npm start Superstatic started. Visit http://localhost:3474 to view your app.
のようにsuperstaticが立ち上がったら指定されたURLに飛んでみるとこんな感じで出ます。
