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

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

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のコアコードを少しずつ読んでく