動機
Reactの内部仕様について記事やソースコードを読んでもいまいち理解できず、console.logやdebuggerを仕込んで動作を確認したいことがある。
これと同等のことはChromeのdevtoolsのAdd logpoint, Add breakpointを使えば可能であるが、該当する箇所を見つけにくいと感じる。見つかっても次に読むべきコードにさくさく辿り着けない。
なので、コードリーディングしやすくできないか模索してみました。
React(Vite)でのやり方
ViteでReactアプリを作成
- npm create vite@latest study-urql -- --template react-ts
- cd study-urql
- npm install
設定でミニファイをOFFにする
-
vite.config.tsのminifyをfalseにする
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [react()],
build: {
minify: false,
}
})
ビルド
- NODE_ENV=development npm run build
なぜNODE_ENV=developmentがいる？
https://github.com/facebook/react/blob/ee1eb4826f4f7beb4e06f2c15f03145bb5bddf5b/packages/react/npm/index.js
ここにあるようにNODE_ENVをproduction以外にしておくミニファイされてないコードでビルドしてくれる模様。
debuggerを仕込む
useStateの処理を理解したいのでGitHubでそれっぽい箇所を特定したがこの先が追えなかったので、以下のようにとりあえずデバッガを仕込んでみる。
function useState(initialState) {
var dispatcher = resolveDispatcher();
debugger;
return dispatcher.useState(initialState);
}
Webサーバーを起動
- http-server dist
- http-serverは別途インストールする必要あり
ステップ実行で追ってみる
とりあえず止まってくれたのでステップ実行してみると
これで次に読むべきコードが分かった。
続いて、
npmパッケージの本体にconsole.logを仕込んで動作させてみる。
任意のnpmパッケージ(URQL)でのやり方
上記の続き
urqlのインストール
- npm install urql graphql
package.jsonを書き換えてミニファイを（強引に）OFFにする
-
node_modules/urql/package.jsonのmoduleをdist/urql.jsに書き換える
diff --git a/node_modules/urql/package.json b/node_modules/urql/package.json
index 95b7760..18f98b4 100644
--- a/node_modules/urql/package.json
+++ b/node_modules/urql/package.json
@@ -21,7 +21,7 @@
"react"
],
"main": "dist/urql.js",
- "module": "dist/urql.es.js",
+ "module": "dist/urql.js",
"types": "dist/urql.d.ts",
"source": "src/index.ts",
"files": [
同様に、node_modules/@urql/core/package.jsonのmoduleもdist/urql-core.jsに修正する。
ビルドし直す
NODE_ENV=development npm run build
console.logを仕込む
HTTPリクエストはどこで実行しているかが気になりGitHubでソースコードを検索してみると見つけたが、
本当にここが呼び出されいるのか確認するために console.log を仕込んでみた。
async function* fetchOperation(operation, url, fetchOptions) {
var networkMode = true;
var result = null;
var response;
try {
yield await Promise.resolve();
response = await (operation.context.fetch || fetch)(url, fetchOptions);
// ここに仕込んだ
console.log(response);
var contentType = response.headers.get("Content-Type") || "";
var results;
...
以下のように出力されることを確認できた。
これで安心してコードリーディングできる！
今回一番感じたメリットは、ビルドで出力したファイルをWebstormなどのIDEで定義ジャンプを使えたこと。
これでさくさく読めるはず！
宿題
URQLで使っているwonkaってライブラリも同様にしてみたが、ソースコードがミニファイされたままなのでこれをどうにかしたい。