ほとんどのコードは src ディレクトリにあり、以下のような構造になる
src
|
+-- assets # 画像、フォントなどの静的ファイルを全て含む
|
+-- components # アプリケーション全体で使用される共有コンポーネント
|
+-- config # グローバル設定、環境変数などがここからエクスポートされ、アプリで使用される
|
+-- features # 機能ベースのモジュール
|
+-- hooks # アプリケーション全体で使用される共有hooks
|
+-- lib # アプリケーション用に設定されたライブラリの再エクスポート
|
+-- providers # アプリケーションのすべてのプロバイダー
|
+-- routes # ルート設定
|
+-- stores # グローバル状態のストア
|
+-- test # テストユーティリティとモックサーバー
|
+-- types # アプリケーション全体で使用される基本タイプ
|
+-- utils # 共有ユーティリティ関数
- 保守しやすくスケールするための方法
- フラットに管理するディレクトリ構造より管理しやすい
- 各機能ディレクトリ
- 特定の機能に対するドメイン固有のコードを含むべき
- 機能の範囲を特定の単位で維持することができる
- 共有して使うモジュール・コンポーネントと混ぜて管理しなくていい
src/features/awesome-feature
|
+-- api # 特定の機能に関連するエクスポートされたAPIリクエスト宣言とAPIフック
|
+-- assets # 特定の機能の静的ファイルを含む
|
+-- components # 特定の機能にスコープされたコンポーネント
|
+-- hooks # 特定の機能にスコープされたフック
|
+-- routes # 特定の機能ページのルートコンポーネント
|
+-- stores # 特定の機能の状態ストア
|
+-- types # 特定の機能ドメインのTSタイプ
|
+-- utils # 特定の機能のユーティリティ関数
|
+-- index.ts # 機能のエントリーポイントで、与えられた機能の公開APIとして機能し、機能の外部で使用されるべきすべてをエクスポートする// Good
import {AwesomeComponent} from "@/features/awesome-feature"
// Bad
import {AwesomeComponent} from "@/features/awesome-feature/components/AwesomeComponent"ESLintで以下のように制限がかけられる
{
rules: {
'no-restricted-imports': [
'error',
{
patterns: ['@/features/*/*'],
},
],
// ...rest of the configuration
}