本家のソースコードをデバッグする
実際に本家の Vue.js のコードを動かして動作を確かめたい場合があるかと思います。
この本の方針としても是非とも本家のソースコード読みながら理解できるようになってほしいところもあり、ソースコードリーディングやテストプレイを強く推奨しています。
そこで、本編では触れていない本家のソースコードのデバッグ方法をいくつか紹介します。
(手軽な順番で紹介していきます。)
SFC Playground を活用する
これは最も手軽な方法です。公式ドキュメントからもリンクされているほど、広く知られている方法です。
このプレイグラウンドでは Vue のコンポーネントを記述しながら動作を確認することはもちろん、SFC のコンパイル結果を確認できます。
サクッとブラウザ上で確認できるので便利です。(もちろん共有もできます。)
vuejs/core のテストを活用する
続いては vuejs/core のテストを実行してみる方法です。 当然ですが、これはもちろん vuejs/core のソースコードを clone してくる必要があります。
git clone https://github.com/vuejs/core.git vuejs-core
# NOTE: `core` というリポジトリ名になっているので、わかりやすくしておくのがおすすめです
あとは、
cd vuejs-core
ni
nr test
でテストを実行する事ができるので、適宜気になるソースコードをいじってみてテストを実行してみましょう。
test
以外にもいくつかテストコマンドがあるので、気になる方は package.json
を見てみてください。
テストコードを読んで把握するもよし、実際にコードをいじってテストを走らせるもよし、テストケースを追加してみるもよし、色々な使い方ができます。
vuejs/core のソースコードを実際に動かしてみる
続いては、一番手軽ではないのですがやはり vuejs/core のソースコードを実際にいじりながら動作させる方法です。
こちらに関しては, SFC, standalone ともに vite で HMR できるプロジェクトを用意しているので、ぜひそちらを使ってみてください。 このプロジェクトは chibivue のリポジトリにあるので clone してください。
git clone https://github.com/Ubugeeei/chibivue.git
clone できたら、プロジェクトを作成するスクリプトを実行します。
この際、ローカルにある vuejs/core のソースコードの絶対パスを求められるはずなので、入力してください。
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 のソースコードをいじりながら動作を確認する事ができます。
nr dev:vue
playground 側の HMR はもちろん、
vuejs/core のコードをいじっても HMR が効きます。
また、standalone で確認したい際は index.html で standalone-vue.js の方を読み込むように変更するとこちらも HMR で確認できます。