در هنگام نصب react فایلی به نام package.json ایجاد می شود که در فرمت json است.این فایل حاوی اطلاعاتی در زمینه نام برنامه، نسخه برنامه و لیست افزونه ها یا dependencies مختلف است که بهمراه برنامه react شما نصب شده است.
این فایل مدیریت و نصب بسته های مرتبط با پروژه را برای دیگران آسان می کند.
فایل package.json حاوی:
- این فایل افزونه ها یا بسته هایی که پروژه شما به آن وابسته است را لیست می کند.
- نسخه هایی از یک بسته را که پروژه شما می تواند استفاده کند را مشخص می کند.
- ساخت دوباره برنامه و اشتراک گذاری آن با دیگر توسعه دهندگان را آسان تر می کند.
هر یک از ویژگی های فایل به نوعی اهمیت خود را دارد. در جایی که برخی از اینها ابتدایی هستند و از نامشان مشخص است، برخی دیگر اینطور نیستند.
- ویژگی name: نام برنامه شما است که هنگام اجرای create-react-app آن را وارد می کنید. شما می توانید هر نامی را به برنامه بدهید، تنها شرط این است که با حروف کوچک باشد. همچنین ممکن است حاوی خط تیره و زیرخط باشد.
- ویژگی نسخه برنامه: نسخه فعلی برنامه شما است. فیلد نسخه باید به شکل x_x_x باشد. به طور پیش فرض، create-react-app آن را به صورت ۰_۱_۰ مقداردهی اولیه می کند.
- ویژگی خصوصی: درست یکی از مهمترین صفات است. کاربرد این است که اگر private را در package.json خود به عنوان true تنظیم کنید، npm از انتشار آن در اکوسیستم npm خودداری می کند. این راهی برای جلوگیری از انتشار تصادفی مخازن خصوصی برنامه است.
- وابستگی ها یا dependencies: شامل تمام ماژول های مورد نیاز و نسخه های مورد نیاز برای برنامه در حال تولید است. بصورت پیش فرض برنامه react شامل سه وابستگی است که به ما امکان می دهد از react , react-dom, react-scripts در جاوا اسکریپت خود استفاده کنیم. react-scripts مجموعه ای از اسکریپت های توسعه را برای کار با React ارائه می دهد. در تصویر بالا، نسخه react به صورت ۳_۶_۱۶^ مشخص شده است، به این معنی که npm جدیدترین نسخه اصلی مطابق با ۱۶_x_x را نصب خواهد کرد. در مقابل، اگر چیزی شبیه ۷_۶_۵~ را در package.json مشاهده کردید، به این معنی است که جدیدترین نسخه کوچک منطبق با ۵_۶_x را نصب خواهد کرد.
نکته: در هنگام نصب از دستور save– برای افزودن بسته های زیرمجموعه یا وابسته به dependencie ها استفاده کنید.
مثال:
1 |
npm <package-name> --save |
- ویژگی devDependencies: اگرچه در تصویر بالا وجود ندارد، بخش مهمی از package.json را تشکیل می دهد. بسته های مورد نیاز برای توسعه و آزمایش را فهرست می کند. برای افزودن یک بسته به این لیست، هنگام نصب، از save-dev– استفاده کنید.
مثال:
1 |
npm <package-name> --save-dev |
- ویژگی scripts: در این بخش مجموعه ای از دستورات کوتاه برای اجرای اسکریپت های مربوط به react-scripts قرار گرفته شده است که می توانید از آنها بصورت کارآمد استفاده کنید.این دستورات شامل دو بخش هستند.بخش اول نام دستور است که با دستور npm در command وارد می شود و قسمت دوم دستور اصلی مربوط به پکیج است. به عنوان مثال، اجرای npm start در خط فرمان، اسکریپتهای react را در پشت صحنه برای اجرا در مرورگر آماده می کند. دستورات دیگر هم به همین شکل است برای ساخت و تولید نهایی برنامه، برای تست برنامه و ….
اسکریپت های دیگری نیز می تواند وجود داشته باشد، مانند prepush، postbuild، lint، deploy و غیره. هر کدام مجموعه ای از دستورات خود را دارند.
به عنوان مثال، هنگام استفاده از gh-pages، می توانید به روش زیر بنویسید. در این دستور مشخص می کند که کدام شاخه و دایرکتوری باید در github قرار بگیرد.
1 |
"deploy": "gh-pages -d build" |
در فایل package.json دو ویژگی دیگر نیز وجود دارد.این ویژگی ها اخیرا توسط create-react-app اضافه شده است:
- ویژگی: eslintConfig: این دستور ابزاری است که کد را تجزیه و تحلیل میکند تا خطاهای برنامهنویسی، اشکالات، خطاهای سبکی و ساختارهای مشکوک را علامتگذاری کند.
- ویژگی browserslist: در این بخش اطلاعاتی در مورد سازگاری برنامه با نسخه های مرورگرها معرفی شده است.در تصویر بالا گفته شده است.
ویژگی browserslist
ویژگی browserlist دارای یک مقدار آرایه است که هر خط معنی و مفهومی دارد.این تنظیمات مربوط به مرورگرها می باشد.
- ۰٫۲%: همه مرورگرهایی که حداقل ۰٫۲٪ از سهم بازار جهانی را دارند
- not dead: مرورگرهای بدون پشتیبانی رسمی در ۲۴ ماه گذشته را حذف کنید
- not ie <= 11: در اینجا IE 11 و نسخه های قدیمی تر را حذف کنید
- not op_mini all: در اینجا یعنی Opera Mini را در نظر نگیرید