בואו נדמיין פרויקט ריאקט שיש בו תיקייה בשם src/components/HomePage ובתוכה ערימה של תיקיות וקובץ אחד בשם index.ts:

.
├── EmptyState
│   ├── EmptyState.tsx
│   └── index.ts
├── ErrorState
│   ├── ErrorState.tsx
│   ├── ErrorState.types.ts
│   └── index.ts
├── RecentArticles
│   ├── RecentArticles.tsx
│   ├── RecentArticles.types.ts
│   └── index.ts
├── RecentArticlesCard
│   ├── RecentArticleCard.tsx
│   ├── RecentArticleCard.types.ts
│   └── index.ts
├── RecentArticlesContent
│   ├── RecentArticlesContent.tsx
│   ├── RecentArticlesContent.types.ts
│   └── index.ts
└── index.ts

תוכן הקובץ index.ts יהיה:

export * from './EmptyState';
export * from './ErrorState';
export * from './RecentArticles';
export * from './RecentArticlesCard';
export * from './RecentArticlesContent';

למה שמישהו יכתוב ככה? מה היתרונות ומה החסרונות? והאם כדאי לנו גם להשתמש בתבנית זו בפרויקטים שלנו? (כן אני יודע רובכם כבר משתמשים. בגלל זה הפוסט)

1. למה כן לכתוב ככה

השימוש בקובץ אינדקס ראשי בתיקיה נועד להקל על אנשים שעושים import לקבצים מאותה תיקייה. קובץ אחר מאותו הפרויקט שמייבא קבצים יוכל לכתוב:

import { EmptyState, ErrorState, RecentArticles } from '@/components';

וזה נחמד כי עכשיו לא צריך לחשוב מאיזו תיקייה הגיעה כל קומפוננטה.

יותר מזה, אם הפרויקט שלי היה ספריה שאנשים אחרים עושים import לדברים מתוכה, אז הייתי יכול להעלות גירסה ולשנות מיקומים של קבצים ושמות שלהם בלי שאותם אנשים שמשתמשים בספריה שלי יצטרכו לעדכן את הקוד שלהם. זה כבר ניצחון רציני.

2. למה לא לכתוב ככה

בחזרה לשורת ה import שהצגתי בקטע הקודם-

import { EmptyState, ErrorState, RecentArticles } from '@/components';

מי שקורא את זה צריך להכיר לעומק את מבנה התיקיות בפרויקט (ולזכור את המבנה בעל פה), או לסמוך על IDE שידע לקרוא איפה כל דבר. לפעמים יש לנו גישה לכזה IDE אבל לפעמים אנחנו צריכים לקרוא קוד בסביבה פחות ידידותית ואז יותר קשה למצוא את הקומפוננטות.

יותר גרוע, קבצי index.ts דורשים תחזוקה - כל פעם שאני משנה שם של משהו בפרויקט או מזיז קובץ ממקום למקום אני צריך לתקן את ההפניות בקובץ האינדקס המתאים. אם הפרויקט הוא ספריה עם משתמשים חיצוניים זה לגמרי שווה את ההשקעה, אבל אם המשתמש היחיד בקומפוננטות הוא קוד הפרויקט עצמו אז לא הרווחנו כלום.