成果物イメージ
├── app
│ ├── app.tag
│ ├── index.js
│ └── name.tag
├── package.json
├── public
│ └── index.html
└── webpack.config.js
プロジェクト作成
npm init
パッケージインストール
npm i -D riot riotjs-loader babel babel-loader webpack webpack-dev-server @babel/core
public/index.html 作成
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>App</title>
</head>
<body>
<app></app>
<script src="bundle.js"></script>
</body>
</html>
app/*.tag ファイル作成
app/name.tag 作成
<name>
<h1>{ opts.first }, { opts.last }</h1>
</name>
app/app.tag 作成
require('./name.tag');
<app>
<name first="Hello" last="World"></name>
<name first="Ola" last="Mundo"></name>
</app>
app/index.js 作成
require('./app.tag');
riot.mount('*');
webpack.config.js 作成
var webpack = require('webpack');
module.exports = {
entry: './app/index',
output: {
path: __dirname + '/public',
filename: 'bundle.js'
},
plugins: [
new webpack.ProvidePlugin({
riot: 'riot'
})
],
module: {
rules: [
{ test: /\.js$|\.tag$/, exclude: /node_modules/, loader: 'babel-loader' },
{ test: /\.tag$/, exclude: /node_modules/, loader: 'riotjs-loader', query: { type: 'none' }, enforce: 'pre' }
]
},
devServer: {
contentBase: './public'
}
};
アプリケーション起動
$ ./node_modules/.bin/webpack-dev-server --inline --hot --mode development
package.json の scripts に エイリアスを作ると良いかもしれない。
ブラウザの出力を確認
http://localhost:8082/ にアクセス。
こんな感じになってればOK。
参考にしたリンク
https://qiita.com/yaaah93/items/f06a993215d55215ed08
https://qiita.com/shota_abe/items/fbd6d988188442a4d11c
https://qiita.com/dondoko-susumu/items/cf252bd6494412ed7847
https://www.npmjs.com/package/riotjs-loader
https://riot.js.org/download/