60629


内容的には「[VueJSを単一ファイルコンポーネントで内包（？）したい](https://ja.stackoverflow.com/questions/60573/vuejs%e3%82%92%e5%8d%98%e4%b8%80%e3%83%95%e3%82%a1%e3%82%a4%e3%83%ab%e3%82%b3%e3%83%b3%e3%83%9d%e3%83%bc%e3%83%8d%e3%83%b3%e3%83%88%e3%81%a7%e5%86%85%e5%8c%85-%e3%81%97%e3%81%9f%e3%81%84/60580?noredirect=1#comment65664_60580)」の続きになります。

# 環境

  * windows10
  * yarn 1.12.3
  * rollup v1.27.0

# やりたいこと

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

# やったこと

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

[code]

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

* * *

次に、

[rollupjsのVueJSプラグインのサンプルページ](https://rollup-plugin-
vue.vuejs.org/examples.html#minimal)を見つけたのでここからコードを拝借。

**rollup.config.js**

[code]

    import vue from 'rollup-plugin-vue'
    
    export default {
      input: 'TestComponent.vue',
      output: {
        format: 'iife',
        file: 'dist/TestComponent.js'
      },
      plugins: [
        vue()
      ]
    }
    
[/code]

* * *

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

**TestComponent.vue**

[code]

    <template>
        <div class="example">{{ message }}</div>
    </template>
    
    <script>
        export default {
            data () {
                return {
                    message: 'Hello world!'
                }
            }
        }
    </script>
    
    <style>
        .example {
            color: red;
        }
    </style>
    
[/code]

* * *

表示させるHTML

**index.html**

[code]

    <!doctype html>
    <html>
    <head>
        <script src="./dist/TestComponent.js"></script>
    </head>
    <body>
    
    <div id="app">
        <test-component></test-component>
    </div>
    
    </body>
    </html>
    
[/code]

* * *

[Rollup Plugin Vue](https://rollup-plugin-
vue.vuejs.org/examples.html#minimal)のページには、main.jsなどの情報はなかったので、  
一旦この状態でコンパイル（`> yarn rollup -c`）しました。

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

[code]

    SyntaxError: export declarations may only appear at top level of a module
    
[/code]

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

* * *

なので、[もともと動いていたサンプル](https://nnahito.com/articles/41)どおり、  
main.js経由でコンパイルをさせるように変更しました。

**main.js**

[code]

    import TestComponent from './TestComponent.vue';
    
    new Vue({
        el: "#app",
        components: {
            "TestComponent": TestComponent,
        },
    });
    
[/code]

* * *

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

**rollup.confing.js**

[code]

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

* * *

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

[code]

    ReferenceError: Vue is not defined
    
[/code]

Vueがない…。

* * *

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

**rollup.confing.js**

[code]

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

変わらずエラー

[code]

    ReferenceError: Vue is not defined
    
[/code]

Vueがない。

* * *

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

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


CC BY-SA 4.0
2019-11-17T13:50:54.250
60609
2019-11-18T09:11:42.717
2019-11-17T15:26:47.397
31257
31257
question
vue.js rollupjs
RollupJSで、VueJSの単一ファイルコンポーネントを生成したい


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

これはesmを出力していることからも分かるように、他のプロジェクトから参照するコンポーネントの作成する方法で、TestComponentを使うアプリ側でさらにrollupやwebpackを使うことを想定したサンプルです。

> ReferenceError: Vue is not defined  
>  Vueがない…。

別途Vueランタイムを読み込まずにバンドルしたいといことでしたら、Vueパッケージをインストールし

[code]

    yarn add vue
    
[/code]

グローバルのVueを使わずに、Vueモジュールをインポートします。

[code]

    // main.js
    import TestComponent from './TestComponent.vue';
    import Vue from 'vue/dist/vue.esm.browser.js'
    
    new Vue({
        el: "#app",
        components: {
            "TestComponent": TestComponent,
        },
    });
    
[/code]

さらに、 rollup-plugin-node-resolve プラグインで node_modules 管理の vue をバンドルします。

[code]

    // rollup.confing.js
    import vue from 'rollup-plugin-vue'
    import nodeResolve from 'rollup-plugin-node-resolve'
    
    export default {
      input: 'src/TestMain.js',
      output: {
        format: 'iife',
        file: 'dist/TestComponent.js'
      },
      plugins: [
        nodeResolve(),
        vue()
      ]
    }
    
[/code]

最後に、コンパイルしたものを index.html から読み込みます。

[code]

    <!doctype html>
    <html>
    <body>
    
    <div id="app">
        <test-component></test-component>
    </div>
    
    <script src="./dist/TestComponent.js"></script>
    
    </body>
    </html>
    
[/code]

目的にもよりますがビルド環境の構築は各種しがらみで面倒なので、JS関連が初めてでVueの勉強が目的でしたら、とりあえず細かいこだわりは捨てて
`@vue/cli` でプロジェクトを作ってその流儀に従うのも一つの手です。


CC BY-SA 4.0
2019-11-18T09:11:42.717
60629
2019-11-18T09:11:42.717
241
60609
answer