60580


# はじめに

JSを周りあまり得意ではありません。

# 環境

  * windows10
  * yarn 1.12.3
  * rollup v1.27.0

# やりたいこと

VueJSの単一ファイルコンポーネントを作成したいと考えています。  
以前以下のやり方で単一ファイルコンポーネントを作成することができました。  
<https://nnahito.com/articles/41>

しかし、このやり方は、VueJSをCDNから呼んでいるため、最近試すと以下のエラーでできなくなっていました。

[code]

    ReferenceError: __vue_normalize__ is not defined
    
[/code]

なので、VueJSも一緒にバージョン管理を行いたいと考えています。

# やったこと

実際やって、ハマっているポイントです。  
結論を先に。

  * VueJSを`yarn add`したあとどうすればいいかがわからない

* * *

とりあえず、単一ファイルコンポーネントコンパイル用のJSにVueを読み込んでみましたがだめでした

[code]

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

* * *

rollup.config.jsで、vuejsを吐き出してみてもだめでした

[code]

    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({
                    compileTemplate: true,
                }),
            ]
        },
    
        {
            input: './vue.js',    // コンパイルする情報が書かれたファイル
            output: {
                format: 'iife',
                file: './vue_bundle.js'    // 書き出しファイル
            },
            plugins: [
                commonjs(),
            ]
        },
    ];
    
[/code]

↑で読み込んでいる`vue.js`

[code]

    import Vue from './node_modules/vue/dist/vue'
    
    window.Vue = Vue
    
[/code]

* * *

知識がなさすぎて、これ以上思いつかず…  
お力を貸していただけますと幸いです。

よろしくお願いたします。


CC BY-SA 4.0
2019-11-16T04:08:34.660
60573
2019-11-16T07:40:02.167
2019-11-16T05:46:16.583
76
31257
question
vue.js yarn rollupjs
VueJSを単一ファイルコンポーネントで内包（？）したい


手元では表示されるエラーが異るのですが、どうやら最新のrollup-plugin-vue(v5.1.2)では`vue-runtime-
helper`まわり構成が変更されたためか、そのあたりのモジュール解決で問題が発生しているようです。([issue
#303](https://github.com/vuejs/rollup-plugin-vue/issues/303), [issue
#308](https://github.com/vuejs/rollup-plugin-vue/issues/308))

これらは、rollup-plugin-vueのバージョンを5.1.1に落すことで一時的な対処が可能です。

[code]

    yarn add rollup-plugin-vue@5.1.1
    
[/code]

* * *

ところで、`compileTemplate` は現在のrollup-plugin-vueでは[廃止されている](https://rollup-plugin-
vue.vuejs.org/migrating.html#compiletemplate)オプションです。情報はすぐに古くなりやすいので公式のドキュメントも積極的に参考にしてください。


CC BY-SA 4.0
2019-11-16T07:40:02.167
60580
2019-11-16T07:40:02.167
2376
60573
answer