Rails4でRiot.js(3.3)が動く環境を構築する
実行環境
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/*