slontが2016年11月28日に投稿(2016年11月28日更新)

はじめに

最近密かに話題のRiot.jsをご存知でしょうか。そうです。噂のこいつです。

<todo>  
  <!-- layout -->
  <h3>{ opts.title }</h3>
  <ul>
    <li each={ item, i in items }>{ item }</li>
  </ul>
  <form onsubmit={ add }>
    <input ref="input">
    <button>Add #{ items.length + 1 }</button>
  </form>

  <!-- style -->
  <style>
    h3 {
      font-size: 14px;
    }
  </style>

  <!-- logic -->
  <script>
    this.items = []
    add(e) {
      e.preventDefault()
      var input = this.refs.input
      this.items.push(input.value)
      input.value = ''
    }
  </script>
</todo>  

詳しい話は先人達の秀逸な記事に任せるとして、今回は新しいライブラリを使いたいけど、導入とか構成とか考える時間がない!って方にオススメのディレクトリ構成のサンプルをご用意しました。


環境

  • Riot.js v3.0.1
  • ES6
  • node.js v6.9.1
  • gulp
  • (jQuery)
  • webpack
  • webpack-dev-server


導入

# git clone https://github.com/slont/riot-sample.git
# cd riot-sample
# npm install -g gulp bower # 入れてない人
# npm install
# gulp build
# bower install
# npm start




画面

簡単ですね。


解説

ディレクトリ構成

riot-sample  
  ├ app - components
  ├ node_modules
  ├ src ┬ scripts ─ index.js
  │     ├ styles ─ index.scss
  │     ├ tags ┬ header.tag
  │     │      └ card ─ index.tag
  │     └ views - index.html
  ├ .bowerrc
  ├ .gitignore
  ├ bower.json
  ├ gulpfile.js
  ├ package.json
  └ webpack.config.js
var webpack = require('webpack');

module.exports = {  
    context: __dirname + '/src',
    entry: {
        'index': './scripts/index.js',
    },
    output: {
        path: __dirname + '/dist',
        filename: '[name].min.js'
    },
    devServer: {  // サーバの設定
        contentBase: 'app',
        port: 3000,
        hot: true,
        inline: true
    },
    module: {
        preLoaders: [
            {
                test: /\.tag$/,
                exclude: /node_modules/,
                loader: 'riotjs-loader',
                query: {
                    type: 'babel'
                }
            }
        ],
        loaders: [
            {
                test: /\.js$|\.tag$/,
                exclude: /node_modules/,
                loader: 'babel-loader',
                query: {
                    presets: ['es2015-riot']
                }
            }
        ]
    },
    resolve: {
        extensions: ['', '.js', '.tag', '.scss']
    },
    plugins: [
        new webpack.optimize.UglifyJsPlugin({
            compress: {
                warnings: false
            }
        }),
        new webpack.ProvidePlugin({
            riot: 'riot'
        })
    ]
};

RiotローダーとBabelローダーを用いてwebpackでコンパイルします。presetにes2015-riotを入れることで、Tag内のES6記法にも対応可能になります。

require('../tags/header')  
require('../tags/card')  // ディレクトリ指定でindex.tagを読める

riot.mount('*')  // これは個々のtagのscript内でマウントしても良いかも  

scripts内のjsは基本的にtagの読み込みとコンポーネントの連携管理とし、viewsの構造と合わせてファイルを作成し、画面毎に読み込ませるようにします。



躓いたところ

clickイベント等の登録

Tag内のscriptでは、タグをマウントするまでDOMが生成されないため登録できません。

<todo>  
  <button id="sample-btn"></button>
  <script>
    // 上手くいかない
    // $("#sample-btn").click(function(e) {...})

    // こうする
    this.on("mount", function() {
      $("#sample-btn").click(function(e) {...})
    })
  </script>
</todo>  

ちなみにES6はコンテクスト気にせずに調子に乗ってアロー関数使ってると死ぬ。
アロー関数の個人的なハマりどころまとめ


WARNING in application.js from UglifyJs

黙ってwebpack.config.jsに以下を指定。

new webpack.optimize.UglifyJsPlugin({ compress: { warnings: false } })  




Cannot convert a Symbol value to a string

始め、es6-loaderを使っていたのだが、このエラーが出て動かなかったので、babel-loaderに変更した。 ちなみに https://github.com/paulmillr/es6-shim/issues/361ではnode0.12系のバグと書いていたが、時分のは6.9系だったのでわけわかめ。


おわりに

駆け足になりましたが、参考になれば幸いです。


参考

↑気に入ったらシェアしてね↑
プロフィール
slont

slont

元金融エンジニア。メイン言語はJava, HTML, JavaScript, Python, Kotlinあたり。SECCONやCTF、NLP、機械学習に興味あり。金融日記購読4年。巷で話題の変態紳士。美女ソムリエ始めてました。 お仕事の依頼はTwitterからお願いします。

comments powered by Disqus
Back to top