という作業を今日していた。
とりあえず、現在の設定ファイルの構成
{
"dependencies": {
"css-loader": "^0.28.0",
"file-loader": "^0.11.1",
"json-loader": "^0.5.4",
"onsenui": "^2.2.1",
"postcss-loader": "^1.3.3",
"riot": "^3.4.0",
"riot-tag-loader": "^1.0.0",
"style-loader": "^0.16.1",
"url-loader": "^0.5.8",
"webpack": "^2.3.3"
}
}
'use strict';
const path = require('path');
const config = {
entry: path.join(__dirname, 'src/entrypoints/application.js'),
output: {
filename: 'bundle.js',
path: path.join(__dirname, 'dist')
},
module: {
rules: [
{
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-loader'
},
{
test: /\.json$/,
loader: 'json-loader',
},
{
test: /\.css$/,
loader: 'style-loader!css-loader',
},
{
test: /\.tag$/,
loader: 'riot-tag-loader',
}
]
}
};
module.exports = config;
'use strict';
import "onsenui";
import "onsenui/css/onsenui.css";
import "onsenui/css/onsen-css-components.css";
const riot = require('riot');
const welcome = require('../components/welcome.tag');
riot.mount('*');
注意点など
基本的に、 Riot + Onsen UI する場合には、
Onsen UI を plain な HTML から使う
という構成で、 Onsen UI として Valid な HTML を構築しつつ、動的なコンポネントを Roit で一まとめにして、 その中で Onsen UI の UI Widgets を使っていく、という感じになると思う。
また、今回は Assets Bundler として Webpack を使ったけど、 他の Bundler Toolchain でも、適切な Transpiler とか用意していけば、大体は出来ると思います。
以上
なんかあんまりこの組合せで使った例とかググっても見つからなかったんだけど、 基本的には上記のイメージで使っていけば問題ないはず。
ちなみに僕は、ここの所 Archlinux で Shell Script か 設定ファイルぐらいしかコードに触ってなくて、 約二週間ぶりぐらいにプログラミングとかしたので、勘を取り戻すに時間がかかり、 最近の Javascript toolchain とかどうなってたっけ？ と調べるのに手間取ってました。
なんと言うか、アレだ。色々とサボってると後が大変ですね、はい。
