parcel-plugin-vueを使って、今話題のParcelからVueの単一ファイルコンポーネントをビルドする方法 #JavaScript

こんにちは。vueJS初心者の人です。
vueの勉強中、「単一ファイルコンポーネント（.vue）を動作させるためにはwebpackとかが必要だよ」と言われて「うぼあー」となっていたところ、Parcelというものが脚光を浴びていたので、導入してみました。

今回、例として作成したファイルはgithubにあげています。
omatsu38/parcel-vue-startkit

Parcelとは

📦 Parcel 、それは小包（直訳）。それはビルドツール。
先日の記事「webpack時代の終わりとparcel時代のはじまり - Qiita」から聞いたことがある人もいることでしょう。
つまり、gulpfileのような設定ファイルのないシンプルなビルドツールということ。
そんな便利で優しい世界が・・・？なんだかとってもすてき！

Parcelの導入

Parcelのインストール

※node.jsは、v.8.9.3を使用しています。
Parcelの導入はターミナルに次の２つのコマンドを打ち込むだけです。

ターミナル

$ npm init -y  #プロジェクトの初期化
$ npm i -D parcel-bundler  #Parcelインストール

単一ファイルコンポーネントをParcel監視対象にする

今回は🐙🐱「parcel-plugin-vue」を使用します。

Make Parcel surport Vue single file components.
（README.mdより）

parcel-plugin-vueのインストール

ターミナル

$ npm i -D parcel-plugin-vue  #parcel-plugin-vueのインストール

また、GithubのREADMEにある通り、こちらの３つのプラグインをインストールをします。

vue
vue-template-compiler
babel-preset-env

ターミナル

$ npm i -D vue   #vueのインストール
$ npm i -D vue-template-compiler   #vue-template-compilerのインストール
$ npm i -D babel-preset-env   #babel-preset-envのインストール

ファイルの準備

vueJSのドキュメントの「単一ファイルコンポーネント - Vue.js」にあるソースコードを例として、以下のファイルを作ります。

ディレクトリ構成

parcel-vue-startkit
├── .babelrc
├── index.html
├── app.js
└── vue
    └── hello.vue

.babelrc

{
  "presets": ["env"]
}

index.html

<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Parcelでvueを動かしたい</title>
</head>

<body>
  <div id="app"></div>
  <script src="app.js"></script>
</body>
</html>

app.js

import Vue from 'vue/dist/vue.esm.js';
import Hello from './vue/hello.vue'

const app = new Vue(Hello);
app.$mount('#app');

vue/hello.vue

<template>
  <p>
    {{ greeting }} World!
  </p>  
</template>

<script>
  module.exports = {
    data: function() {
      return {
        greeting: 'Hello',
      }
    }
  }
</script>

<style scoped>
  p {
    font-size: 2em;
    text-align: center;
    color: #2e9afe;
  }
</style>

動作確認

実行コマンド

次のコマンドでコンパイルを行うと、ビルド結果が表示されます。

ターミナル

$ npx parcel index.html
⏳  Building...
Server running at http://localhost:1234 

✨  Built in 1.89s.

この結果の通りhttp://localhost:1234にアクセスすると
動作の結果を見ることができます。

結果の出力先はどこに？

プロジェクトフォルダ直下にdistファイルが自動的に作成され、
そこにコンパイル結果が出力されていることが確認できます。

これからのParcelが楽しみ

今回、様々な記事やgithubを見た結果「便利だけど、製品版に使うのはまだ先」という感じでした。せめてソースマップがあれば・・・！
とはいえ、githubのstar数やparcel専用のプラグイン数が急上昇していることから、採用される未来はそんなに遠くないだろうなーと思います。
設定ファイルに翻弄されない未来がくるといいですね。