昨年12月に、この記事を見てWebpackからParcelに乗り換えることを決意、Vue派の私は、
「どうしてもParcelでVueを使いたい！」
しかし調べ始めてもネットには日本語どころか英語の知見もほとんど転がっていない状況。
(Reactは公式にもサンプルがあったはずですが)
おそらくこの記事を読んでいるあなたも同じ悩みを抱えていることではないでしょうか。
Parcelとの出会いからかれこれ7ヶ月、試行錯誤の末たどり着いたビルド環境を貴重な(?)日本語の知見(?)として公開します。
テンプレ
まずは手っ取り早く、私がいつも使うVue + Vuex + vue-routerをひとまとめにしたテンプレ環境と、サーバーも一気に開発したいんだ！！という方向けにサーバー付きテンプレを上げておきます。
サーバーフレームワークはKoaを使っています。
正直、私の好み全部載せ感否めませんが、参考にしていただければと思います。
解説することもない解説
たどり着いてしまえばかなりシンプルです。
最も重要なのはparcel-plugin-vueというパッケージです。
これを入れさえすれば.babelrcもほぼ白紙で動くのではないかと思います。
ひとつ、不思議なことがありまして、このテンプレをビルドすると、
parcel-bundler/parcel @1.7.0 support Vue Now. This plugin will be not recommended.
というwarningが出るのですが、いざparcel-plugin-vueを消してビルドさせてみると初回ビルドに非常に時間がかかる上、2回目以降 ( キャッシュのある状態で ) のビルドもparcel-bundlerを使った場合に比べて数十 ~ 数百倍 ( 数十~数百ms → 数s ) 時間がかかるようでした。
しかもparcel-bundlerを使って動いていたのと同じ設定同じファイルでブラウザは真っ白エラーはなしという最悪の事態。
まだParcelのVueデフォ対応は完璧ではないように思います。
追記 ( 2018.11.20 )
使おうとクローンしてきたら動かなくなってたので調査したところ、プラグインなどなにも要らなくなってたようです…
parcel-bundlerにvueがあれば動くようです。
すこし悲しいですが、素晴らしいことです。
参考記事
👋
以上参考になれば幸いです。
必要に応じて追記していきます。
参考
Parcel 入門 ～Parcelはwebpackの代わりになるのか～
( と、上記事のイベントを聴いて口コミをくれたzmirez )