dayjournal memo

Total 973 articles!!

Riot.js #011 – webpackでビルド

Yasunori Kirimoto's avatar

riot-js_001_01


今回は、Riot.jswebpackでビルドしてみます。


まず、riot関係の必要なモジュールをインストールします。


npm install -D webpack riot riot-tag-loader riot-hot-reload


今回は、下記のようなディレクトリ構造にします。


それぞれのコードを準備します。


webpack.config.js


var webpack = require('webpack');

module.exports = {
    entry: './_resouce/main.js',
    output: {
        path: __dirname + '/dist',
        filename: 'app.js'
    },
    module : {
        rules : [
            {
                test: /\.tag$/,
                exclude: /node_modules/,
                loader: 'riot-tag-loader',
                query: {
                    hot: true,
                    debug: true
                }
            }
        ]
    },
    plugins: [
        new webpack.optimize.UglifyJsPlugin({
            compress: {
                warnings: false
            }
        }),
        new webpack.ProvidePlugin({
            riot: 'riot'
        })
    ]
};

index.html


<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <title>Riot.js Sample</title>

</head>
<body>

    <h1>Riot.js !!</h1>

    <sample></sample>

    <script src="./app.js"></script>

</body>
</html>

sample.tag


<sample>

    <h2>{list}</h2>
    <sample2></sample2>

    <style scoped>

        h2 {
            color: #0D47A1;
        }

    </style>

    <script>

        this.list = "フォーム表示";

    </script>

</sample>

sample2.tag


<sample2>

    <form onsubmit={submit}>
        <input type="text" ref="username"/>
        <input type="password" ref="password"/>
        <button type="submit" ref="submit">Go</button>
    </form>

    <style scoped>

        input, button {
            font-size: 20px;
        }

    </style>

    <script>

        this.submit = function() {

            console.log('username: ', this.refs.username.value);
            console.log('password: ', this.refs.password.value);

        }.bind(this);

    </script>

</sample2>

main.js


require('./tag/sample.tag');
require('./tag/sample2.tag');

riot.mount('*');

ビルドすると、コンパイルされたapp.jsが生成されます。


webpack


index.htmlを実行すると下記のようにブラウザで表示されます。


main.js 各タグを読み込み:


require('./tag/sample.tag');
require('./tag/sample2.tag')

webpack.config.js タグを読み込むローダー:


    module : {
        rules : [
            {
                test: /\.tag$/,
                exclude: /node_modules/,
                loader: 'riot-tag-loader',
                query: {
                    hot: true,
                    debug: true
                }
            }
        ]
    }

webpack.config.js Riot.jsを認識:


        new webpack.ProvidePlugin({
            riot: 'riot'
        })
        

webpack.config.js 出力するJSを圧縮:


        new webpack.optimize.UglifyJsPlugin({
            compress: {
                warnings: false
            }
        }),
        

tagファイルをwebpackでビルドすると、app.jsのみを読み込むことによりコンテンツの表示が可能です。



book

Q&A