yarn watchの存在を忘れていた

毎回 yarn dev したあと待ってました。何やってたんだ

yarnでコンパイル

Laravelでフロントエンド回りの開発をしてると頻繁にコンパイルする必要が生じるわけでして、通常は、

npm run dev

または

yarn dev

でコンパイルを実行するわけです。ただこれ、対象の全ファイルをコンパイルし直すので時間が掛かるんですよね。今僕が参画しているプロジェクトの場合、Laravel Mixの対象になっているファイルがあまり多くないのですがそれでもローカルで20秒前後かかります。作業してちょっと確かめたいときに毎回これを待つのは辛い。ツラいんだけども、こういうもんだったよなと思って諦めてました。Vue.jsで開発するの久々だったのもあって。

yarn watchを使えよ

yarn prod したらエラーが出たので調べたらこれでした。

Laravel Mix 6は、CLIからいくつかのオプションが削除されました。
それに応じてscriptsてpackage.jsonファイルのセクションを更新する必要があります

[npm]npm run prodに失敗する – Qiita

で、package.jsonを更新していて思い出したんですよ。

そういえば watch ってあったな……

まーーーーーったく忘れてました。

watchってなんだっけ？

npm run watchコマンドはターミナルで実行し続け、関連ファイル全部の変更を監視します。webpackは変更を感知すると、アセットを自動的に再コンパイルします。

アセットのコンパイル(Mix) 6.x Laravel

というわけで、変更があったらその箇所だけコンパイルし直します。全体だと20秒掛かっていたコンパイルも、Watchで変更ファイルだけコンパイルすると1秒以下。保存してエディタからブラウザに移動してページ更新するまでの間にコンパイルが終わるので、コンパイルを感じないと言っても過言ではありません。

まとめ：yarn watchを使えよ

契約期間終了間近、期日まで時間がない、僕バックエンドエンジニアとしてアサインされてるんですけど？という事情はありつつ、予定になかった機能が機能要求にしれっと盛り込まれててVue.jsの開発を余儀なくされているここ数日なんですけど、少しでもストレスを軽減出来る watch を再発見出来てほんと良かった。さっさと実装終わらせないと。