背景
仕事で簡単なLP構築をする機会があった。
暫くフロンエンドを触っていなかったので勉強も兼ねて前々から気になっていたriotを動かしてみる。
作業ログ
まずはプロジェクトフォルダ以下にpackage.jsonの作成
$ npm init
webpack関連パッケージ インストール
※webpackはJSファイルをまとめる高機能なモジュールバンドラーの1つ
$ npm i webpack webpack-cli webpack-dev-server
riot関連パッケージ インストール
$ npm i riot @riotjs/hot-reload @riotjs/webpack-loader @riotjs/compiler
クイックスタートを参考にファイルの準備
index.html
<html>
<head>
<meta charset="UTF-8">
<title>Riot app</title>
</head>
<body>
<div id="app"></div>
<script src="public/bundle.js" charset="utf-8"></script>
</body>
</html>
app.riot
<app>
<p>{ props.message }</p>
</app>
main.js
import * as riot from 'riot'
import App from './app.riot'
const mountApp = riot.component(App)
const app = mountApp(
document.getElementById('root'),
{ message: 'Hello World' }
)
webpackの設定ファイルの用意webpack.config.js
const path = require('path')
const webpack = require('webpack')
module.exports = {
entry: './main.js',
output: {
path: path.resolve(__dirname, 'public'),
publicPath: '/public/',
filename: 'bundle.js'
},
devtool: 'inline',
module: {
rules: [
{
test: /\.riot$/,
exclude: /node_modules/,
use: [{
loader: '@riotjs/webpack-loader',
options: {
hot: true
}
}]
}
]
}
}
ここまでのファイル構成はこんな感じ
webpack-dev-serverで動作確認
./node_modules/.bin/webpack-dev-server --port 8080
http://localhost:8080/ にアクセス
デプロイ用にbundle.jsの作成
$ ./node_modules/.bin/webpack
出力したbundle.jsとindex.htmlをサーバにアップすればサーバでも動くはず。
所感
ネットに情報があまり転がっていない印象。
また、v3からv4で大幅な変更があったようで数少ないネット記事を頼りに Hellow World を表示するのにも想像以上に時間をかけてしまった(笑)
このままriot.jsでサイト構築するかは要検討。