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

実際に本家の 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/chibivue-land/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 で確認できます．