Vite+

Vite+とは？

Vite+はウェブ開発のための統合CLIツールチェーンで、実行環境管理、パッケージマネージャー選択、共通のフロントエンドワークフローを単一インターフェースに統合します。開発サーバーの起動、本番出力のビルド、コード品質チェック、テスト、パッケージングを標準化することを目的としています。

プロジェクトはMITライセンスの下で無料・オープンソースです。macOS/LinuxおよびWindows向けのインストール手順が用意されています。ウェブサイトでは、日常タスクの単一エントリーポイントとして位置づけられ、基盤ツールチェーンに既存のオープンソースコンポーネントを活用しています。

主な機能

• 共通ウェブタスク（dev, build, check, test, run, pack）向けの統合CLI
  • フロントエンドスタック全体で一貫したワークフローを提供し、複数ツールの個別管理を不要にします。
• 自動実行環境およびパッケージマネージャー選択
  • Nodeを自動使用し、各プロジェクトに適したパッケージマネージャーを選択します。
• 単一設定ファイルと一貫したコマンドフロー
  • スタック全体でコマンドスタイルを統一することを目指します。
• フォーマット、Lint、型チェックを1パスで実行する「check」
  • Oxlint（Lint）、Oxfmt（フォーマット）駆動のツールを実行し、tsgoによる型チェックを含み、可能な限り自動修正します。
• アプリ設定を再利用可能なJest互換テストランナー
  • Vite+ testはアプリケーションのresolve/transform設定を再利用し、ブラウザモードやスナップショットテストなど複数モードをサポートします。
• キャッシュ付きモノレポ指向タスク実行
  • Vite+ runはモノレポおよびスクリプト向けタスクランナーで、自動入力追跡によるキャッシュ可能タスクとワークスペースパッケージ間の依存関係対応実行を提供します。
• npmライブラリおよびスタンドアロンバイナリのパッケージングサポート
  • 「pack」はTypeScript/JavaScriptライブラリをバンドルし、DTS生成を行い、スタンドアロンアプリバイナリやトランスフォームのみの非バンドルモードを生成可能です。
• Viteおよび関連コンポーネント基盤
  • サイトではViteとRolldown駆動のスタックを参照し、パッケージング用tsdownやテスト用Vitestなどの追加コンポーネントを言及しています。

Vite+の使い方

1. Vite+をグローバルインストール。
   • macOS/Linux: curl -fsSL https://vite.plus | bash
   • Windows (PowerShell): irm https://vite.plus/ps1 | iex
2. 新しいターミナルセッションでCLIを使用開始。
   • ウェブサイトではインストール後にvp helpの実行を推奨しています。
3. CIでは提供されるセットアップステップを使用。
   • ウェブサイトではsetup-vp .を使用することを示しています。
4. Vite+経由で標準プロジェクトコマンドを実行。
   • 一般例: vp dev、vp build、vp check、vp test、vp run、vp pack。

ユースケース

• リポジトリ全体での開発・ビルドワークフロー標準化
  • チームは単一CLIエントリーポイントで開発サーバー起動、本番ビルド、品質チェックを一貫したコマンドフローで実行できます。
• 1コマンドでフォーマット、Lint、型チェックを実行するCI
  • vp checkでフォーマット、Lint、型チェックを統合実行し、サイトでは可能な自動修正のための--fixサポートを記載しています。
• アプリ変換設定を共有したテスト
  • ユニットテストでアプリケーションのresolve/transform設定が必要な場合、Vite+ testが自動再利用します。
• モノレポスクリプトおよびキャッシュ可能タスク
  • パッケージ間依存タスクの場合、vp runが依存関係対応実行と追跡入力ベースのキャッシングを提供します。
• ライブラリのパッケージングまたはスタンドアロンアーティファクト生成
  • vp packはnpm用TS/JSライブラリ（DTS生成、パッケージエクスポート含む）をバンドル、またはスタンドアロンアプリバイナリをビルドし、非バンドル変換のみモードも可能です。

FAQ

• Vite+はnpm、pnpm、yarnの代替ですか？

  • Vite+は実行環境を管理し、各プロジェクトのパッケージマネージャーを選択しますが、選択されるマネージャーはプロジェクト設定次第です。ウェブサイトではpnpm、npm、yarnをサポートオプションとして挙げています。

• フォーマット、Lint、型エラーのチェック方法は？

  • vp checkを使用。サイトでは1パスでフォーマット、Lint、型チェックをカバーし、vp check --fixで可能な自動修正を適用できると述べています。

• Vite+のテストフレームワーク互換性は？

  • テストランナーは「Jest互換」と記述され、Vitest駆動です。

• CIでのVite+セットアップ方法は？

  • サイトではCI向けにsetup-vp .を具体的に言及しています。

• Vite+でライブラリやアプリケーションのパッケージングは可能ですか？

  • はい。ウェブサイトではvp packをTypeScript/JavaScriptライブラリ（DTS生成含む）パッケージングおよびスタンドアロンアプリバイナリビルド用に記述し、変換のみ非バンドルモードなどのオプションを挙げています。

代替案

• フレームワークのデフォルトツールチェーンを使用（例: Viteベースのスクリプト）

  • 統一CLIの代わりに、dev/build、linting/formatting、type-checking、テストごとに別々のコマンドを実行し、ツール固有の設定がさらに必要になる場合があります。

• 各ステップごとに専用のツールを使用（lint/format/type/test/package）

  • 一般的な方法として、ESLintをフォーマッターと組み合わせ、専用のtype-checkerと別々のテストランナーを使用し、配布用にバンドラー/パッケージャーを活用します。

• 専用のモノレポタスクランナーを使用

  • モノレポでは、依存関係を意識した実行とキャッシュに焦点を当て、他のタスク（dev/build/check/test/package）は別ツールで処理する代替案があります。

• ライブラリ向け汎用ビルド・パッケージングパイプラインを使用

  • ライブラリのパッケージングと型定義生成が主目的の場合、統一されたvp packワークフローの代わりに、バンドラー＋TypeScript DTS生成ステップに依存する代替案があります。