実行環境
- Ruby on Rails 4.2.0
- Riot.js 3.3.2
前提
あらかじめNode.jsがローカルにインストールされていること。
$ node -v
を実行してバージョンが表示されればOK。
1. npmを使ってriotをインストールする
$ cd (Railsプロジェクト直下のディレクトリ)
プロジェクト直下にpackage.jsonがない場合は下記を実行
$ npm init
=> 基本Entで進み、package.jsonが作成される
packeage.jsonを編集
scripts, devDependenciesの箇所にriotを記載。
今回riotのバージョンを指定したが、しなくてもOK。編集が終わったら保存。
{
"name": "(プロジェクト名)",
"version": "1.0.0",
"description": "",
"scripts": {
"riot": "riot"
},
"devDependencies": {
"riot": "3.3.2"
},
"private": true
}
フロントエンド系のソースをまとめたいのでプロジェクト直下にディレクトリを作成
$ mkdir ./frontend
package.jsonを/frontend
以下へ移動する
$ mv ./package.json frontend/
npmを使ってriotをインストール。
今回このプロジェクトのみにインストールしたかったのでgオプションはつけませんでした。
また、指定のディレクトリ以下にインストールしたかったのでprefixオプションをつけました。
$ npm install --prefix ./frontend/
frontend以下にetc, node_modulesディレクトリが作成された!
この時点でfrontend以下はこのようなディレクトリ構造になっていると思います。
frontend/
├── etc
├── node_modules
├── package.json
└── riot
├── sample.tag
2. RailsでRiot.jsを使うためにソースをDLしてきて配置する
gemもあるようだけど、うまく動かなかったのでRiotの公式サイトからソースファイルをDLしてきて利用することにした。
curlコマンドでcompilerが含まれたmin.jsファイルをDLしてくる。
公式サイトのGitHubから、riot+compiler.min.jsを取得する。RawボタンからリンクするページのURLを指定すること〜。
oオプションをつけるとこの名前で保存するという指定ができる。
$ curl https://raw.githubusercontent.com/riot/riot/master/riot%2Bcompiler.min.js -o ./vendor/assets/javascripts/riot.js
application.jsに追記し、上記のソースが読み込まれるようにする。
app/assets/javascripts/application.js
(省略)
//= require riot
これで環境構築は完了!
3. サンプルファイルを配置し、コンパイルを実行
tagファイルを作成
$ mkdir frontend/riot
$ touch frontend/riot/sample.tag
公式サイトで配布されているサンプルコードをコピーし、sample.tagとして保存
<sample>
<h3>{ message }</h3>
<ul>
<li each={ techs }>{ name }</li>
</ul>
<script>
this.message = 'Hello, Riot!'
this.techs = [
{ name: 'HTML' },
{ name: 'JavaScript' },
{ name: 'CSS' }
]
</script>
<style>
:scope { font-size: 2rem }
h3 { color: #444 }
ul { color: #999 }
</style>
</sample>
html.erbファイルを作成
ブラウザで確認出来るviewファイルのbodyタグ内にsampleタグを配置し、mountする処理を書く。
(例)app/views/articles/index.html.erb
<!-- place the custom tag anywhere inside the body -->
<sample></sample>
<!-- mount the tag -->
<script>riot.mount('sample')</script>
コンパイルを実行し、tagファイルからjsファイルを作成
$ ./frontend/node_modules/.bin/riot ./frontend/riot/ app/assets/javascripts/riot/
↑については下記のような意味
[npm内のriotファイル] [tagファイルがあるディレクトリを指定] [jsファイルを作成したいディレクトリを指定]
4. 実行
ブラウザで上記のhtml.erbファイルを確認すると、、
Riotのコードが正しく実行されている(このサンプルの場合はsample.tagで設定した内容が表示されている)ことが確認出来る!
5. 諸々コミット対象から外しておく
node_modules以下、tagファイルはコミット対象に入れない方がベターなので、.gitignoreに追記しておく。
.gitignore
(省略)
/frontend/node_modules/*
/app/assets/javascripts/riot/*