Viteを読む

デバッグ環境を整えて、これから読んでいく感じです。

それで読んでいくんですが、build時の挙動を見ていきたいので、

すると、cli.tsの最後の行でparse method を呼び出しているので、そこを読んでいく

https://gyazo.com/ea698715e890352493040e8de55ff3d0

それで、読み進めると、runMatchCommandというメソッドがあるのでそれが各コマンドへのエントリーポイントっぽい。

https://gyazo.com/e4d7d9552b39744090f85e33fd779237

それで、結局はcli.tsの build の処理を書いている箇所に飛ばされる

https://gyazo.com/0cf10023d0cd5989410d10c1c6c02c6d

それで、結局build.tsの690行目に辿り着きました。

https://gyazo.com/11687deaa9930f086e15f98ba484099d

ここで、rollupを使ってバンドルしています。

そう、viteはrollupというバンドルツールのラッパーだったのです...(勝手にviteの中でバンドルしていると思っていた)

ちなみに、dev 環境と build 環境で使用するバンドルツールを変えており、dev は esbuild, build は rollupらしいです。

まあ一旦それは置いておいて、rollupを見ていきます。

読み進めるとGraphというクラスが出てくるのですが、どんなグラフになるのか想像つかない...

コメントかいてくれーーー

vite/node_modules/.pnpm/rollup@3.27.1/node_modules/rollup/dist/es/shared/node-entry.js

ここの26565行目あたりにdebuggerを入れると良い

ここで、rollupがbuildを行っている

https://gyazo.com/b0a5705d4c2e625ccba6e077bc6fee9d

まず、pluginを呼び出していてこんな感じ。

code:call-plugin

async hookParallel(hookName, parameters, replaceContext) {

const parallelPromises = [];

for (const plugin of this.getSortedPlugins(hookName)) {

await Promise.all(parallelPromises);

parallelPromises.length = 0;

await this.runHook(hookName, parameters, plugin, replaceContext);

}

else {

parallelPromises.push(this.runHook(hookName, parameters, plugin, replaceContext));

}

}

await Promise.all(parallelPromises);

}

https://gyazo.com/f2d12f652dbc2807f4d355ba1acf4946

なるほどぉ、となったので次はbuildを読む

https://gyazo.com/7d6bceea1f56f4029456ef5b612e1286

https://gyazo.com/2e6513913fe9eabc5cbc0cb226e71262