rollup.jsで、vuejsの単一ファイルコンポーネントを実行するところまで

この記事の目次
chevron_right rollup.jsとは
chevron_right rollup.jsの準備
chevron_right vue.jsの単一ファイルコンポーネントの準備
chevron_right 単一ファイルコンポーネントをコンパイルする為のJS
chevron_right rollup.jsのコンフィグファイルを作成
chevron_right 必要モジュールのinstall
chevron_right rollup.jsで単一ファイルコンポーネントをコンパイルする
chevron_right HTMLから読み込んで見る
chevron_right 参考

rollup.jsとは

なんか、Webpackみたいなやつっぽい
オレも勉強し始めでよくわかってないけど、なんかコンフィグファイルが書きやすかった。

rollup.jsの準備

あんまり良くない気はしますが、Quick Startに書かれているので、
rollup.jsをグローバルにインストールします。

npm install --global rollup

vue.jsの単一ファイルコンポーネントの準備

今回利用する単一ファイルコンポーネントを準備します。

名前は「TestComponent.vue」とでもしましょう。
今回は簡単のため、全て同一階層にファイルを保存していきます。

<template>
    <div class="example">{{ message }}</div>
</template>

<script>
    export default {
        data () {
            return {
                message: 'Hello world!'
            }
        }
    }
</script>

<style>
    .example {
        color: red;
    }
</style>

単一ファイルコンポーネントをコンパイルする為のJS

単一ファイルコンポーネントをコンパイルする為のJS、「main.js」を作ります。

import TestComponent from './TestComponent.vue';

new Vue({
    el: "#app",
    components: {
        "TestComponent": TestComponent,
    },
});

rollup.jsのコンフィグファイルを作成

「rollup.config.js」という名前で保存します。

import vue from 'rollup-plugin-vue';
import commonjs from 'rollup-plugin-commonjs';

export default [
    {
        input: './main.js',    // コンパイルする情報が書かれたファイル
        output: {
            format: 'iife',
            file: './bundle.js'    // 書き出しファイル
        },
        plugins: [
            commonjs(),
            vue()
        ]
    },
];

必要モジュールのinstall

さくさく入れていきましょう。

npm install rollup-plugin-vue
npm install vue-template-compiler
npm install rollup-plugin-commonjs

rollup.jsで単一ファイルコンポーネントをコンパイルする

rollup.jsのコマンドを叩きます。
今回作ったような、rollup.config.jsが存在するときは、以下のコマンドで実行できます。

rollup -c

上記コマンドが実行されると、「bundle.js」が出来上がると思います。

HTMLから読み込んで見る

適当な名前で以下のHTMLを保存し、ブラウザから見てみます。
「Hello world!」が出力されますね！

<!doctype html>
<html>
<head>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>

<body>

<div id="app">
    <test-component></test-component>
</div>
<script src="./bundle.js"></script>

</body>
</html>

参考
[PR] おすすめの本
この記事を書いた人
Nな人（えぬなひと）。
Nは本名から取っています。
Laravelが大好きなPHPerで、WEBを作るときはLaravelを技術スタックに絶対推すマン。
PHP、Pythonと、昔はperlを書いていたP言語エンジニア。
最近はNimを書いたりしています。