Riot.js+Webpackの構成 #JavaScript

ReactにつづいてRiotも少し触ってみたので備忘録です。

とりあえず環境作りから

package.json

{
  "name": "asset",
  "version": "1.0.0",
  "description": "",
  "main": "webpack.config.babel.js",
  "scripts": {
    "watch": "webpack --watch --progress"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.22.1",
    "babel-loader": "^6.2.10",
    "babel-preset-es2015": "^6.22.0",
    "babel-preset-es2015-riot": "^1.1.0",
    "riotjs-loader": "^4.0.0",
    "webpack": "^1.14.0"
  },
  "dependencies": {
    "riot": "^3.0.7"
  }
}

パッケージ

まずはBabelのコンパイラとローダーを追加

$ npm install --save-dev babel-core babel-loader

ES2015で記述したいのでpresetsを追加

$ npm install --save-dev babel-preset-es2015 babel-preset-es2015-riot

WebpackでRiot.jsを使うためのローダーを追加

$ npm install --save-dev riotjs-loader

最後にRiot.js本体

$ npm install --save riot

Webpack構成ファイル

まずは基本に忠実に...
https://github.com/esnunes/riotjs-loader

webpack.config.babel.js

import path from 'path';
import webpack from 'webpack';

export default [
    {
        context: path.join(__dirname, './js'),
        entry: {
            app: './app.js'
        },
        output: {
            path: path.join(__dirname, '../js'),
            filename: '[name].js'
        },
        module: {
            preLoaders: [
                {
                    test: /\.tag$/,
                    exclude: /node_modules/,
                    loader: 'riotjs-loader'
                }
            ],
            loaders: [
                {
                    test: /\.js[x]?$|\.tag$/,
                    exclude: /node_modules/,
                    loader: 'babel-loader'
                }
            ]
        },
        resolve: {
            extensions: ['', '.js', '.tag']
        },
        plugins: [
            new webpack.ProvidePlugin({
                riot: 'riot'
            })
        ]
    }
]

上記はbabelで書いてあるので.babelrcも準備しておきます。

.babelrc

{
    "presets": [ "es2015", "es2015-riot" ]
}

カウントアップするだけのアプリケーション

実際に作ったサンプルを。

ディレクトリ構成

- countapp
    - index.html
    - js
        - app.js
    - asset
        - package.json
        - webpack.config.babel.js
        - .babelrc
        - js
            - app.js
        - tag
            - count.tag

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <count></count>
    <script src="js/app.js"></script>
</body>
</html>

asset/js/app.js

import count from '../tag/count'
riot.mount('count')

asset/tag/count.tag

<count>
    <p>カウント: { count }</p>
    <button onclick={ add }>+</button>
    <button onclick={ minus }>-</button>
    <script>
        this.count = 0;
        add() {
            this.count += 1;
        }
        minus() {
            this.count -= 1;
        }
    </script>
</count>

単純にカウントアップするだけですがあとはnpm run watchでwebpackを起動すればOKです。
まだまださわりはじめたばかりですのでぼちぼちとやっていきます。