内容的には「VueJSを単一ファイルコンポーネントで内包（？）したい」の続きになります。

環境

  • windows10
  • yarn 1.12.3
  • rollup v1.27.0

やりたいこと

VueJSの処理ファイルをhtmlから<script>タグで呼び出せるようにしたい。
要は「単一ファイルコンポーネント」の形にしたい。

やったこと

まず、yarnで必要なモジュールを落としてきました。
package.jsonは以下になります。

{
  "dependencies": {
    "rollup": "^1.27.0",
    "rollup-plugin-css-only": "^1.0.0",
    "rollup-plugin-vue": "5.1.0",
    "vue-template-compiler": "^2.6.10"
  }
}

次に、

rollupjsのVueJSプラグインのサンプルページを見つけたのでここからコードを拝借。

rollup.config.js

import vue from 'rollup-plugin-vue'

export default {
  input: 'TestComponent.vue',
  output: {
    format: 'iife',
    file: 'dist/TestComponent.js'
  },
  plugins: [
    vue()
  ]
}

コンパイル対象の「TestComponent.vue」を作成

TestComponent.vue

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

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

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

表示させるHTML

index.html

<!doctype html>
<html>
<head>
    <script src="./dist/TestComponent.js"></script>
</head>
<body>

<div id="app">
    <test-component></test-component>
</div>

</body>
</html>

Rollup Plugin Vueのページには、main.jsなどの情報はなかったので、
一旦この状態でコンパイル（> yarn rollup -c）しました。

ブラウザでHTMLにアクセスしてみると、

SyntaxError: export declarations may only appear at top level of a module

と発生。
なんかHTMLからは呼び出せない？

なので、もともと動いていたサンプルどおり、
main.js経由でコンパイルをさせるように変更しました。

main.js

import TestComponent from './TestComponent.vue';

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

rollup.confing.jsファイルのinput部分も変更

rollup.confing.js

import vue from 'rollup-plugin-vue'

export default {
  input: 'main.js',
  output: {
    format: 'esm',
    file: 'dist/TestComponent.js'
  },
  plugins: [
    vue()
  ]
}

するとエラー内容が変わりました。

ReferenceError: Vue is not defined

Vueがない…。

この辺よくわかっていないのですが、esmやiifeなどoutput.format部分で指定があります。
もともと動いていたサンプルのページではiifeになっていたので、iifeに変更して再度コンパイルします。

rollup.confing.js

import vue from 'rollup-plugin-vue'

export default {
  input: 'main.js',
  output: {
    format: 'iife',
    file: 'dist/TestComponent.js'
  },
  plugins: [
    vue()
  ]
}

変わらずエラー

ReferenceError: Vue is not defined

Vueがない。

私はどうしたらいいのでしょうか。
どうすれば動くのでしょうか。。。（そしていつになったらvueの勉強始められるのでしょうかorz）

お知恵をお貸しただけますと幸いです。
よろしくお願いいたします。