まず、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のみを読み込むことによりコンテンツの表示が可能です。
