この記事は、「Riot.js Advent Calendar 2017」の23日目の記事です。
お仕事で、Riot.jsとMaterializeとwebpackでwebアプリを構築した時の環境構築のメモ。
ビルド環境をGitHubでも公開しています。Riot.jsを手軽に始めたい方ぜひご利用ください。
実際に構築したwebアプリは、この環境にDynamoDBを追加利用してます。できるだけサーバーレスでSPAを構築しています。
ディレクトリ構成
package.json
{
"name": "riot-starter",
"version": "1.0.0",
"description": "",
"main": "main.js",
"scripts": {
"build": "webpack"
},
"keywords": [],
"author": "Yasunori Kirimoto",
"license": "ISC",
"devDependencies": {
"riot": "^3.6.1",
"riot-hot-reload": "^1.0.0",
"riot-tag-loader": "^1.0.0",
"webpack": "^3.5.4"
},
"dependencies": {
"css-loader": "^0.28.7",
"style-loader": "^0.18.2",
"url-loader": "^0.5.9",
"file-loader": "^1.1.4",
"jquery": "^2.1.4",
"materialize-css": "^0.100.2",
"ress": "^1.2.2",
"riot-route": "^3.1.2"
}
}
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
}
},
{
test: /\.css/,
loaders: ['style-loader', 'css-loader']
},
{
test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
loader:"url-loader?limit=10000&mimetype=application/font-woff"
},
{
test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
loader: "file"
}
]
},
plugins: [
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false
}
}),
new webpack.ProvidePlugin({
riot: 'riot',
$: 'jquery',
jQuery: 'jquery',
'window.jQuery': 'jquery'
})
]
};
./_resouce
main.js
// JS一式を読み込んでパッケージ
import {sample01} from './js/sample01.js';
import {sample02} from './js/sample02.js';
// CSS一式を読み込んでパッケージ
import 'ress/ress.css';
import 'materialize-css/dist/css/materialize.css';
import './css/icon.css';
import './css/style.css';
// materialize(JS)を読み込んでパッケージ
import 'materialize-css';
// riot-route読み込み(v3からRiot.jsに既存では入っていない)
import route from 'riot-route';
// 入力画面を読み込んでパッケージ
import './tag/input_page.tag';
// ルートページに割り当て
route('/', function() {
riot.mount('app','input_page', {
type: 'input',
sample01: sample01
});
});
// 結果画面を読み込んでパッケージ
import './tag/output_page.tag';
// #outputに割り当て
route('/output', function(){
riot.mount('app', 'output_page', {
type: 'output',
sample02: sample02
});
});
// ルータースタート
route.start(true);
./_resouce/css
iconフォントファイルも準備
- MaterialIcons-Regular.woff
- MaterialIcons-Regular.woff2
style.css
html, body {
background-color: #FFFFFF;
color: #383838;
}
icon.css
@font-face {
font-family: 'Material Icons';
font-style: normal;
font-weight: 400;
src: url(MaterialIcons-Regular.woff2) format('woff2'),
url(MaterialIcons-Regular.woff) format('woff');
}
.material-icons {
font-family: 'Material Icons';
font-weight: normal;
font-style: normal;
font-size: 24px;
line-height: 1;
letter-spacing: normal;
text-transform: none;
display: inline-block;
white-space: nowrap;
word-wrap: normal;
direction: ltr;
-webkit-font-feature-settings: 'liga';
-webkit-font-smoothing: antialiased;
}
./_resouce/js
sample01.js
export function sample01() {
var sample = "sample01 実行";
console.log(sample);
}
sample02.js
export function sample02() {
var sample = "sample02 実行";
console.log(sample);
}
./_resouce/tag
input_page.tag
<input_page>
<div class="row">
<div class="container">
<div class="col s12 center">
<p>
Riot Starter
</p>
</div>
<div class="col s12 center">
<button class="btn waves-effect waves-light light-blue darken-4" type="button" name="action" onclick={click}>
Go
<i class="material-icons left">
done
</i>
</button>
</div>
</div>
</div>
<style scoped>
p {
font-size: 40px;
}
</style>
<script>
// ページ読み込み時処理
this.on('mount', function() {
// 関数読み込み
var sample01 = opts.sample01;
// 関数実行
sample01();
});
// ボタンクリック時処理
this.click = function() {
// 出力ページへ移動
location.href = "/#output";
}.bind(this);
</script>
</input_page>
output_page.tag
<output_page>
<div class="row">
<div class="container">
<div class="col s12 center">
<p>
Output
</p>
</div>
<div class="col s12 center">
<i class="large material-icons">
hot_tub
</i>
</div>
</div>
</div>
<style scoped>
p {
font-size: 60px;
}
</style>
<script>
// ページ読み込み時処理
this.on('mount', function() {
// 関数読み込み
var sample02 = opts.sample02;
// 関数実行
sample02();
});
</script>
</output_page>
./dist
app.jsとフォントファイルは自動でビルド
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Riot Starter</title>
</head>
<body>
<app></app>
<script src="./app.js"></script>
</body>
</html>
ファイルの準備ができたら対象ディレクトリでコマンド実行
パッケージインストール
npm install
ビルド
npm run build
ローカルサーバーを立ち上げて確認すると表示される。
Riot.jsについて、他にも記事を書いています。よろしければぜひ。
tags - Riot.js
- 参考文献
Riot.js
Materialize
webpack