0

はじめに

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

環境

  • windows10
  • yarn 1.12.3
  • rollup v1.27.0

やりたいこと

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

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

ReferenceError: __vue_normalize__ is not defined

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

やったこと

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

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

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

import Vue from './node_modules/vue/dist/vue.js';
import TestComponent from './TestComponent.vue';

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

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

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(),
        ]
    },
];

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

import Vue from './node_modules/vue/dist/vue'

window.Vue = Vue

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

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

2
  • 1
    同じ状況の書かれた質問: teratail.com/questions/223255 (細かな点で差異があるので質問者が同一かは判断していませんが、もしマルチポストであれば教えて下さい。)
    – hinaloe
    Commented 2019年11月16日 6:42
  • 1
    また、「だめだった」は具体的にどういう状況なのかも明記してください。(同じエラーがでた、異なるAというエラーがでた、エラーらしきものは見当らないが動かない、など)
    – hinaloe
    Commented 2019年11月16日 7:30

1 件の回答 1

2

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

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

yarn add [email protected]

ところで、compileTemplate は現在のrollup-plugin-vueでは廃止されているオプションです。情報はすぐに古くなりやすいので公式のドキュメントも積極的に参考にしてください。

8
  • ご回答ありがとうございます。なるほど、最新版にはエラーが有るのですね。 もう一つなのですが、VueJSをバージョン管理するには、「window.Vue = Vue」のファイルをコンパイルし、読み込むのが正しいのでしょうか。 Commented 2019年11月16日 13:56
  • 一般には正しくないです。質問文の「とりあえず〜」までの手順ならギリギリセーフです。(もっと言えば、esm版のもの、たとえばvue.esm.browser.jsなど、の使用がおすすめです。あるいは、node-resolveプラグインととreplaceプラグインでのprocrss.env.NODE_ENVの置換を行えばimport Vue from 'vue'だけでインポートできるはずですがここでは省きます)
    – hinaloe
    Commented 2019年11月16日 14:35
  • (あっvueを指定したときに読み込まれるのはランタイムオンリーなので質問の使い方では使えないかもしれません……
    – hinaloe
    Commented 2019年11月16日 14:40
  • ご回答ありがとうございます。 「正しくない」のですね…… こちら、そのような設定ファイルの書き方が、私では見つけられなかったのですが、どちらかに載っているのでしょうか。 正直、vue.jsvue.esm.browser.jsvue.esm.jsなど様々入っていて、どれが何に使えるものかもわかっておりません。 また、procrss.env.NODE_ENVも何かがわからず。。。 Commented 2019年11月16日 15:55
  • 自分も普段rollupでアプリケーションをビルドするわけではなく今すぐに紹介できる「これをみておけばいい」などという記事などがあるわけではありませんが、アプリケーションのビルドとしてはwebpack、ライブラリのビルドにrollupがそれぞれ向いているため、必然的に情報もそれらが影響します。当然ビルド周りは異なりますが、アプリケーション構成としては共通ですし参考になるかもしれません。あるいはrollupにこだわる理由がないのであれば、vue-cliを使って始めるのが(内部でwebpackを使っています)手っ取り早いのですが。あとは少し脱線気味なので調べてみてわからなければ新たな質問でどうぞ。とりあえずはvue.esm.browser.jsを使っておいてもいいでしょう。
    – hinaloe
    Commented 2019年11月16日 17:47

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。