Vue.jsのアプリ開発でローカルの依存ライブラリを参照してデバッグログを追加する手順

はじめに

Vue.jsとVeeValidate V4でアプリケーションを書いているときに、VeeValidateにデバッグログを追加して挙動を調査したときの手順をメモ。 例によって、真っ当な方法かは不明です。とりあえずこれでやりたいことはできました。

手順

アプリケーションのpackage.jsonを編集

{
//…(略)…
  "dependencies": {
//…(略)…
    "vee-validate": "file:../ghq/github.com/logaretm/vee-validate/packages/vee-validate",
//…(略)…
  }
//…(略)…
}

参考: https://docs.npmjs.com/cli/v10/configuring-npm/package-json#local-paths

VeeValidateを取得してビルド

ここではパッケージマネージャはpnpmを使っています。

デバッグログとして console.log() を適宜追加してビルドします。

ghq get logaretm/vee-validate
cd ~/ghq/github.com/logaretm/vee-validate
pnpm i
npm run build

アプリケーションをdevモードで実行

VeeValidateをビルドするたびに以下のコマンドを実行し、ビルド結果を参照しつつ実行します。

rm -rf node_modules/.vite; pnpm i && npm run dev