2
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

riot.js webpack でHellow World

Last updated at Posted at 2020-01-23

背景

仕事で簡単な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
                    }
                }]
            }
        ]
    }
}

ここまでのファイル構成はこんな感じ

スクリーンショット 2020-01-23 19.05.40.png

webpack-dev-serverで動作確認

./node_modules/.bin/webpack-dev-server --port 8080

http://localhost:8080/ にアクセス
スクリーンショット 2020-01-23 18.58.33.png

デプロイ用にbundle.jsの作成

$ ./node_modules/.bin/webpack

出力したbundle.jsとindex.htmlをサーバにアップすればサーバでも動くはず。

所感

ネットに情報があまり転がっていない印象。
また、v3からv4で大幅な変更があったようで数少ないネット記事を頼りに Hellow World を表示するのにも想像以上に時間をかけてしまった(笑)

このままriot.jsでサイト構築するかは要検討。

2
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?