Viteのコードを読む - CLI経由でのコア実行の流れ

前回: Viteのコードを読む - リポジトリ直下のファイル群 - memo_md

コアのファイルをよむ

• packages/vite を見ていく
• とりあえずディレクトリ構造を眺めてみる

ディレクトリ構造

.
├── bin
├── dist
│   ├── client
│   └── node
│       └── chunks
├── scripts
├── src
│   ├── client
│   └── node
│       ├── __tests__
│       │   ├── packages
│       │   │   ├── name
│       │   │   └── noname
│       │   └── plugins
│       ├── optimizer
│       ├── plugins
│       ├── server
│       │   ├── __tests__
│       │   │   └── fixtures
│       │   │       ├── lerna
│       │   │       │   └── nested
│       │   │       ├── none
│       │   │       │   └── nested
│       │   │       ├── pnpm
│       │   │       │   └── nested
│       │   │       └── yarn
│       │   │           └── nested
│       │   └── middlewares
│       └── ssr
│           └── __tests__
└── types

• 実はそんなにディレクトリはないっぽい
• 普段はCLI経由で叩くことが多いので、CLIからどういった流れでコアのコードが実行されているのかを追ってみる

CLI経由でのコマンド実行の流れ

1. bin/vite.js
2. dist/node/cli
3. コマンドに応じた振り分け

bin/vite.js

• source-map-supportのインストール (StackTraceから追えるようにぽい)
• --profile オプションに応じた挙動の切り替え
  • APIドキュメントとかには記述がない
  • new inspector.Session() を呼び出しているのでデバッグ用？
• require('../dist/node/cli') … 実行本体
  • 実際には packages/vite/src/node/cli.ts

dist/node/cli (packages/vite/src/node/cli.ts)

• CLIは cac ベース。読みやすい
• CLIに限らず、出力全体的に picocolors を使ってた。便利そう
• 次のコマンドを登録してる
  • [root] (alias → vite serve / vite dev)
    • https://vitejs.dev/guide/api-javascript.html#createserver
  • build
    • https://vitejs.dev/guide/api-javascript.html#build
  • optimize
    • https://vitejs.dev/config/#dep-optimization-options
  • preview
    • https://vitejs.dev/guide/api-javascript.html#preview

コマンドに応じた振り分け

[root]

• vite起動本体。ViteDevServerが立ち上がる（実体は https://nodejs.org/api/http.html）
• packages/vite/src/node/server/index.ts # createServer
• CLIオプションを inlineConfig として渡す

build

• 本番用build
• packages/vite/src/node/build.ts # build

optimize

• packages/vite/src/node/optimizer.ts # optimizeDeps
• https://vitejs.dev/guide/dep-pre-bundling.html
• 通称 dependency pre-bundling の実行
• 一部依存を事前解決しておくことで、vite serve 時のパフォーマンス向上に繋がるぽい

preview

• packages/vite/src/node/preview.ts # preview
• https://vitejs.dev/guide/static-deploy.html#testing-the-app-locally
• build でビルドした成果物の確認用
• dist に吐かれたものをサーバ起動し確認
  • サーバは serve 同様 http が内部的に使われる

---

• 依存しているライブラリ (cac とか picocolors とか) は自分でも使えそう
• CLI経由の場合オプションはそれほどない。まだ読めるって感じする
• コア(root)の中に入るとそれなりに大きい。そこからが本番って感じ

---

次 → 振り分けている各コマンドの詳細を見ていく