本家のソースコードをデバッグする

実際に本家の Vue.js のコードを動かして動作を確かめたい場合があるかと思います。
この本の方針としても是非とも本家のソースコード読みながら理解できるようになってほしいところもあり、ソースコードリーディングやテストプレイを強く推奨しています。

そこで、本編では触れていない本家のソースコードのデバッグ方法をいくつか紹介します。

(手軽な順番で紹介していきます。)

SFC Playground を活用する

これは最も手軽な方法です。公式ドキュメントからもリンクされているほど、広く知られている方法です。

このプレイグラウンドでは Vue のコンポーネントを記述しながら動作を確認することはもちろん、SFC のコンパイル結果を確認できます。
サクッとブラウザ上で確認できるので便利です。(もちろん共有もできます。)

続いては vuejs/core のテストを実行してみる方法です。当然ですが、これはもちろん vuejs/core のソースコードを clone してくる必要があります。

bash

git clone https://github.com/vuejs/core.git vuejs-core
# NOTE: `core` というリポジトリ名になっているので、わかりやすくしておくのがおすすめです

あとは、

bash

cd vuejs-core
ni
nr test

でテストを実行する事ができるので、適宜気になるソースコードをいじってみてテストを実行してみましょう。

test 以外にもいくつかテストコマンドがあるので、気になる方は package.json を見てみてください。

テストコードを読んで把握するもよし、実際にコードをいじってテストを走らせるもよし、テストケースを追加してみるもよし、色々な使い方ができます。

続いては、一番手軽ではないのですがやはり vuejs/core のソースコードを実際にいじりながら動作させる方法です。

こちらに関しては, SFC, standalone ともに vite で HMR できるプロジェクトを用意しているので、ぜひそちらを使ってみてください。このプロジェクトは chibivue のリポジトリにあるので clone してください。

bash

git clone https://github.com/Ubugeeei/chibivue.git

clone できたら、プロジェクトを作成するスクリプトを実行します。

この際、ローカルにある vuejs/core のソースコードの絶対パスを求められるはずなので、入力してください。

bash

cd chibi-vue
ni
nr setup:vue

# 💁 input your local vuejs/core absolute path:
#   e.g. /Users/ubugeeei/oss/vuejs-core
#   >

これで chibivue のリポジトリ内にローカルの vuejs/core を指すような vue のプロジェクトが作成されます。

あとは起動したい時に以下のコマンドで起動して、vuejs/core のソースコードをいじりながら動作を確認する事ができます。

bash

nr dev:vue

playground 側の HMR はもちろん、

vuejs/core のコードをいじっても HMR が効きます。

また、standalone で確認したい際は index.html で standalone-vue.js の方を読み込むように変更するとこちらも HMR で確認できます。