riot.js webpack でHellow World

3670 ワード
riot HTML5 CSS3 HTML5 テキストリンク

背景

仕事で簡単な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でサイト構築するかは要検討。