うしろのこの本ください

なんでもかきます

Parcel + Vue.js であっさり目にフロント開発に触れてみる

Parcel は一時期話題になった時に知ってから今まで全く触れてこなかったのでやってみたかったのと、

jQuery + ES5 等でフロントの世界が止まっている人に気軽に ES6 over な世界観を体験してもらう方法を考えていたのもあり手を出すことにした。

parceljs.org

この記事で作ったやつはリモートにあげといた。

github.com

設定ファイル不要でモジュールのバンドルやらなんやらをしてくれる賢い子で、新しいバージョンでは .babelrc すら不要になっていたのでそろそろ使ってもいいかなと思った。

実践

Parcel の本領である環境構築の手軽さは次元を超え、2行のコマンドで完結してしまう程になっていた。

コマンド入力の前にディレクトリの作成と npm init か yarn init はやっておくこと。

yarn init --yes/-y とすると対話をスキップしてデフォルト値で packarge.json を作ってくれるらしい。よく分からない場合はこれで作ると良いと思う。

npm なら以下のコマンドを実行

npm install --save vue
npm install --save-dev parcel-bundler

yarn なら以下のコマンドを実行

yarn add vue
yarn add --dev parcel-bundler

インストールが終わったら package.json の scripts にプロジェクトスタート用のスクリプトを追記する。以下を追記

{
  "scripts": {
    "start": "parcel index.html"
  }
}

できたらこんな感じになるはずだ。

f:id:apple19940820:20181025225758p:plain

つまり、必要なものは Vue の本体と parcel-bundler のみ。少し前までは専用のプラグインが必要だった気がするが、なくなっていた。

全くNode.js/npm を触っていない人は良く分からないと思うけど、よく分からなくていいです。そのうち嫌でも分かるようになるよ。

これで先ほど追記したスクリプトを実行すればSFC だろうがしっかりバンドルして出力される。

このままだとビルドする元ネタがないので作りましょう。本当に基本的なものでOK。

構成例(npmの場合)

  • ./
    • node_modules
    • src
      • components
        • HelloWorld.vue
      • App.vue
      • index.js
    • index.html
    • package.json
    • package-lock.json

各ファイルは以下のような感じで書けばいいと思う。

index.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>vue-tmp</title>
  </head>
  <body>
    <div id="app"></div>
    <script src="/src/index.js"></script>
  </body>
</html>

index.js

import Vue from 'vue'
import App from './App.vue'

new Vue({
  el: '#app',
  render: h => h(App)
})

App.vue

<template>
  <div>
    <hello-world/>
  </div>
</template>

<script>
import HelloWorld from "./components/HelloWorld"

export default {
  components:{
    HelloWorld
  }
}
</script>

HelloWorld.vue

<template>
  <div>
    <h1>{{ msg }}</h1>
  </div>
</template>

<script>
export default {
  data (){
    return {
      msg:`Hello Parcel World!`
    }
  }
}
</script>

できたら npm run start または yarn run start

ビルドされて生成物が dist/ の直下に吐かれる。ついでに .cache というフォルダも出来るが Parcel が差分ビルドを行うためのキャッシュディレクトリのようだ。

そして start したので localhost:1234 でWebサーバが立ち上がっている。飛んでみると以下のように表示されるはずだ。

f:id:apple19940820:20181025233713p:plain

雑感

普段 @vue/cli や create-nuxt-app で十分ストレスフリーな環境構築が出来てはいるが、本当に設定ファイルを触らなくて良い時は Parcel で十分だと感じた。

特に webpack.config.js の姿を見なくて良いのは清々しい気分だ。この調子で node_modules まで吹き飛んでくれたら JavaScript の世界は完全に靄が晴れるという気がする。

フロントに怯えている人はまず Parcel + Vue.js 辺りであっさり塩味がおすすめです。

おわり