search
LoginSignup
17

More than 3 years have passed since last update.

posted at

updated at

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

本記事は 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-routerVuex も使える

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

zero configuration は伊達じゃない!

o0750041712867467981.jpg

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

まとめ

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

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

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

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

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

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
17