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です。
まだまださわりはじめたばかりですのでぼちぼちとやっていきます。