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

前回: Viteのコードを読む - ディレクトリ構造とテスト実行 - memo_md

リポジトリ直下のファイル群をみてみる

チェックアウトしたリポジトリの直下にあるファイル群。 主に設定ファイルとかそういう系を眺めてみる。

一覧

• package.json
• LICENSE
• CODE_OF_CONDUCT.md
• CONTRIBUTING.md
• jest.config.ts
• netlify.toml
• pnpm-lock.yaml
• pnpm-workspace.yaml
• README.md

LICENCEとかそういうのは省略。必要そうなのを見ていく。

package.json

• node ≥ 12.2.0
• scripts

preinstall で npx only-allow pnpm

https://github.com/pnpm/only-allow

• 利用可能なパッケージマネージャを強制するツールらしい。こんなのあったのか..
• 試しに yarn install とかすると Use "pnpm install" for installation in this project. とエラーにしてくれる

format や lint はよくある感じ。eslintやprettierを実行してる。 他は jest実行系, vitepressによるドキュメント生成系、viteやpluginのビルド系、などがある

lint-staged

• https://github.com/okonet/lint-staged
• gitでstageされたファイルを対象にlint,prettierを実行
• prettierは全ファイル。eslintはtsファイルのみ対象に実行している

simple-git-hooks

• https://github.com/toplenboren/simple-git-hooks
• husky 的なもの
• pre-commit : lint-staged を実行してる
• commit-msg : https://git-scm.com/docs/githooks#_commit_msg

コミットやマージのタイミングで scripts/verifyCommit.ts を実行

• コミットメッセージの内容が規則に沿ってるかチェックしてる
• feat|fix|docs|dx|refactor|perf|test|workflow|build|ci|chore|types|wip|release|deps で始まらないと弾かれる

pnpm-workspace.yaml / pnpm-lock.yaml

以下をmonorepos対象にしてる

• packages/*
• packages/playground/**

jest.config.ts

• ts-jest利用

意外とテスト実行時に型チェックしてるんだなという感想

VITE_TEST_BUILD 指定時は実行対象を playground 配下に絞ってる

• npm script の test-build test-serve の呼び分けで使う
• 開発サーバモードでテストするか、ビルドモードでテストするかの違い
• CONTRIBUTING.md にそのあたりの説明がある

globalSetup: './scripts/jestGlobalSetup.cjs'

• playwright-chromium で browser を起動
• packages/temp に playground のファイルをコピーしてる？

globalTeardown: './scripts/jestGlobalTeardown.cjs'

• global.__BROWSER_SERVER__ にサーバーがあれば閉じる
• packages/temp を消して後片付け

testEnvironment: './scripts/jestEnv.cjs'

• 独自のEnvironmentを実装して適用
• setup

wsEndpoint を参照して、ブラウザで接続

• global.page に新しく開いたブラウザのページを保持

teerdown

• ブラウザを閉じてる

setupFilesAfterEnv: ['./scripts/jestPerTestSetup.ts']

• 各 Playground のテストディレクトリにある serve.js があれば実行する

ビルドやサーバ起動を行ってる

• requireしてみて serve or preServe があれば実行という感じ

isBuildTest (VITE_TEST_BUILD で決まる)の値に応じて page から繋ぐ接続先のURLを切り替えてる

• isBuildTest がtruthyならビルドされる
• Viteのサーバではなく、ビルド結果を使って http パッケージによる配信を行う

CODE_OF_CONDUCT.md

健全なOSS運営についてのポリシーが書いてある。

大事。

CONTRIBUTING.md

• リポジトリのセットアップ方法

pnpm 周りの導入あたりがわかる

テスト実行周り

• playwright使ってますよ〜という話
• 開発サーバモードとビルドモードの違い
• テストの書き方

デバッグログの出力方法 PRのガイドライン Dependencies周りの注意点

• 小さく保つためRollupでバンドルするのが前提で、基本的にdevDependenciesになる
• requireは使えないので dynamic import を使う必要がある
• 依存関係が大きく、機能のわりにサイズが大きいものは使わない
• 結構厳しい感じ。自力で作れるものは作りましょうって感じかもしれん

型付けを完璧に維持してますという話 オプション追加、ホントに必要かよく考えろよという話

• 価値があるのか、他に方法（別オプションやプラグインでの解決）が無いのか、など

翻訳や Vite Land (https://chat.vitejs.dev) の話

感想

• JestのEnvironment独自で作ってるのはナルホドって感じだった
• 依存関係気軽に足せないのは大変そう
• lint-staged とか普通に知らんかった..、便利そうなので使っていきたい

次→Viteのコアコードを少しずつ読んでく