Help us understand the problem. What is going on with this article?

Rails4でRiot.js(3.3)が動く環境を構築する

More than 3 years have passed since last update.

実行環境

  • 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/*
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした