Vue+Vuetify+Vuex+Fuse-boxで開発環境を構築

タイトル通りなのですがVue関連は特に罠はない感じです。fuse-boxが少しハマりました。メモとして残しておきます。

fuse-boxのインストール

執筆時点ではfuse-box 3.7.1が最新版でした。公式では前提条件として node.js 8.2+ となっているのですが標準プラグインがES2018で記述されているぽく（object rest/spread properties関連と思われる）node.js 8.2 では動きませんでした。実際はES2018 をサポートしている node.js 8.6以上が必要です。

あとは通常のインストールで問題ないです。

yarn init

yarn add fuse-box typescript terser uglify-js --dev

yarn add vue-template-compiler vue-template-es2015-compiler vue-hot-reload-api postcss-selector-parser --dev

yarn add vue

yarn add vuetify

yarn add vuex

fuse.js設定

最初はスクラッチから作っていたのですがドキュメントを読み込んでいると時間がかかりました。ですのでベースとしてfuse-box-vue-seed のfuse.jsを元に設定していくと良いと思います。

Sassを使っていなかったのですがそのままコピーして動かすとパッケージが足りない、など引っかかるので不要なプラグインは使わないように編集したり、require(“fuse-box/es6”);とes6にしたりが主な編集ポイントでした。

Sparkyは好みですね。キャッシュや不要ファイルの削除は便利そうです。

TypeScriptの設定

fuse.jsでhomedirに指定した場所にtsconfig.jsonが作成されます。オプションの設定が必要であれば指定しましょう。

terser-plugin

本家ドキュメントではリンク切れになっていますのでterser-pluginへのリンクを張っておきます。設定は特にしないでも動くと思います。uglify-jsを使うかどうか自動判断されます。