本記事は Vue.js Advent Calendar 2018 2日目です。
自己紹介
| key | value |
|---|---|
| 名前 | 諦念 |
| 年齢 | 25歳 |
| ロール | サーバーサイドエンジニア (2019年1月からフロントエンドエンジニア) |
| GitHub | teinen |
| @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 だって使えます。
<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-utilsvue-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 の組み合わせを体験してみましょう！