riot-js_001_01


今回は、Riot.jswebpackでビルドしてみます。


まず、riot関係の必要なモジュールをインストールします。


npm install -D webpack riot riot-tag-loader riot-hot-reload


今回は、下記のようなディレクトリ構造にします。


それぞれのコードを準備します。


webpack.config.js


var webpack = require('webpack');

module.exports = {
entry: './_resouce/main.js',
output: {
path: __dirname + '/dist',
filename: 'app.js'
},
module : {
rules : [
{
test: /\.tag$/,
exclude: /node_modules/,
loader: 'riot-tag-loader',
query: {
hot: true,
debug: true
}
}
]
},
plugins: [
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false
}
}),
new webpack.ProvidePlugin({
riot: 'riot'
})
]
};


index.html


<!DOCTYPE html>
<html lang="ja">

<head>
<meta charset="UTF-8">
<title>Riot.js Sample</title>

</head>
<body>

<h1>Riot.js !!</h1>

<sample></sample>

<script src="./app.js"></script>

</body>
</html>


sample.tag


<sample>

<h2>{list}</h2>
<sample2></sample2>

<style scoped>

h2 {
color: #0D47A1;
}

</style>

<script>

this.list = "フォーム表示";

</script>

</sample>


sample2.tag


<sample2>

<form onsubmit={submit}>
<input type="text" ref="username"/>
<input type="password" ref="password"/>
<button type="submit" ref="submit">Go</button>
</form>

<style scoped>

input, button {
font-size: 20px;
}

</style>

<script>

this.submit = function() {

console.log('username: ', this.refs.username.value);
console.log('password: ', this.refs.password.value);

}.bind(this);

</script>

</sample2>


main.js


require('./tag/sample.tag');
require('./tag/sample2.tag');

riot.mount('*');


ビルドすると、コンパイルされたapp.jsが生成されます。


webpack


index.htmlを実行すると下記のようにブラウザで表示されます。


main.js
各タグを読み込み:


require('./tag/sample.tag');
require('./tag/sample2.tag')


webpack.config.js
タグを読み込むローダー:


module : {
rules : [
{
test: /\.tag$/,
exclude: /node_modules/,
loader: 'riot-tag-loader',
query: {
hot: true,
debug: true
}
}
]
}


webpack.config.js
Riot.jsを認識:


new webpack.ProvidePlugin({
riot: 'riot'
})


webpack.config.js
出力するJSを圧縮:


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


tagファイルをwebpackでビルドすると、app.jsのみを読み込むことによりコンテンツの表示が可能です。