本記事は Vue.js Advent Calendar 2018 2日目です。

自己紹介

key	value
名前	諦念
年齢	25歳
ロール	サーバーサイドエンジニア (2019年1月からフロントエンドエンジニア)
GitHub	teinen
Twitter	@tei_nen

TL; DR

Vue.js + TypeScript + Parcel 構成のボイラープレート作った。
webpack の config 地獄から開放されていい感じ。ビルドも爆速。
Single File Component も TypeScript も簡単に使える。
個人開発等でさっくり使うのにオススメ。

リポジトリ

塩おむすび並に質素で簡素なボイラープレートはこちらから。

teinen/vue-ts-parcel-boilerplate
Vue.js + TypeScript + Parcel boilerplate

プロジェクト構成

Vue.js
vue-router
Vuex
TypeScript
Parcel
ESLint
Jest

package.json はこんな感じです。

{
  "name": "vue-typescript-parcel-boilerplate",
  "description": "This is a very simple boilerplate with Vue.js, TypeScript, Parcel.",
  "author": "teinen",
  "license": "MIT",
  "scripts": {
    "serve": "parcel index.html --open",
    "watch": "parcel watch index.html",
    "build": "parcel build index.html",
    "lint": "eslint --fix --ext .vue,.ts ./src",
    "test": "jest --watch"
  },
  "dependencies": {
    "vue": "^2.5.17",
    "vue-class-component": "^6.3.2",
    "vue-hot-reload-api": "^2.3.1",
    "vue-property-decorator": "^7.2.0",
    "vue-router": "^3.0.1",
    "vuex": "^3.0.1"
  },
  "devDependencies": {
    "@types/jest": "^23.3.10",
    "@vue/component-compiler-utils": "^2.3.0",
    "@vue/eslint-config-prettier": "^4.0.1",
    "@vue/eslint-config-typescript": "^3.1.1",
    "@vue/test-utils": "^1.0.0-beta.26",
    "autoprefixer": "^9.3.1",
    "babel-eslint": "^10.0.1",
    "eslint": "^5.9.0",
    "eslint-plugin-vue": "^4.7.1",
    "jest": "^23.6.0",
    "parcel-bundler": "^1.10.3",
    "postcss-modules": "^1.4.1",
    "sass": "^1.15.0",
    "ts-jest": "^23.10.5",
    "typescript": "^3.1.6",
    "vue-jest": "^3.0.1",
    "vue-template-compiler": "^2.5.17"
  }
}

使い方

# 依存関係のインストール
$ yarn install

# 開発用サーバーの起動(webpack-dev-server 的なもの)
$ yarn serve # => localhost:1234 でサーバーが立ち上がる

作ってみた感想

ビルドが高速

公式にもベンチマークが掲載されている通り、ビルドがめちゃくちゃ速いです。

計 1726 モジュール
圧縮前で 6.5M
Macbook Pro ( 2016 年モデル, 4 コア ) でビルド

バンドラ	ビルド時間
browserify	22.98s
webpack	20.71s
parcel	9.98s
parcel (キャッシュ使用)	2.64s

( 公式ページより )

今手元に大きめのアプリケーションが無いので、手元での計測は追々...

Single File Component ( SFC ) がしっかり使える

個人的に一番嬉しいポイントです。
もちろん scoped SCSS だって使えます。

vue-ts-parcel-boilerplate/src/components/Hello.vue

<template>
  <h1>Hello, {{ framework }} + {{ altjs }} + {{ bundler }}</h1>
</template>

<script lang="ts">
import { Component, Prop, Vue } from "vue-property-decorator";

@Component
export default class Hello extends Vue {
  /** data */
  @Prop() private framework!: string;
  @Prop() private altjs!: string;
  @Prop() private bundler!: string;
}
</script>

<style lang="scss" scoped>
</style>

少し前までは、 parcel-plugin-vue というプラグインが必要だったようですが、現在は必要ありません。

そのかわり、以下の 2 つが必要です。

@vue/component-compiler-utils
vue-template-compiler

`vue-router` も `Vuex` も使える

Parcel とこの辺りのコアライブラリを組み合わせた記事があまり出てこなかったですが、普通に使えました。
Vue.js での開発に困ることはありませんね😊

`zero configuration` は伊達じゃない！

本当に設定が無いです。潔すぎるシンプルさ。
もはや「設定が無い」と言うよりも、「設定をさせない」と言う強固な意志を感じます。

まとめ

Parcel、名前は知っていたけど...

webpack 等と同じ要領で使えるのか？
Single File Component は使えるのか？
vue-router や Vuex は使えるのか？

といった素朴な疑問や、公式サイトの Vue のレシピやアセットページがやたらスッキリしていたので、「実際のところ、どこまで使えるんだろう？」という検証も兼ねてボイラープレートを作ってみた次第です。

Vue.js は 3.0 でより小さく、より速くなります。
(この話は、公式ブログを翻訳してくださったうーねこさんの記事が詳しいです)

Vue.js 3.0 を首を長くして待ちつつ、軽量・高速・シンプルな Parcel と Vue.js の組み合わせを体験してみましょう！

Vue.js + TypeScript + Parcel のボイラープレート作ってみた