https://virgool.io/feed/@behrouz.shafaati fa 2026-06-10 13:05:32 https://files.virgool.io/upload/users/1624702/avatar/jqW4Jw.jpeg?height=120&width=120 https://virgool.io/@behrouz.shafaati https://virgool.io/design-paterns/singleton-pattern-%D8%A7%D9%84%DA%AF%D9%88%DB%8C-%D8%B3%DB%8C%D9%86%DA%AF%D9%84%D8%AA%D9%88%D9%86-rlzi5ytq9zry یک نمونه را در تمام برنامه به اشتراک بگذارید!Singleton ها کلاس هایی هستند که می توانند فقط و فقط یک بار نمونه سازی شوند و به صورت سراسری قابل دسترسی هستند. این نمونه واحد را می توان در سراسر برنامه به اشتراک گذاشت، که Singletons را برای مدیریت وضعیت سراسری در یک برنامه عالی می کند.برای درک بهتر ماجرا بیایید ببینیم که با استفاده از کلاس ES2015 یک سینگلتون چطور خواهد بود. برای این منظور، قصد داریم یک کلاس Counter بسازیم که دارای:یک متد getInstance که مقدار نمونه را برمی گرداند.یک متد getCount که مقدار فعلی متغیر counter را برمی گرداند.یک متد increment که مقدار counter را یک بار افزایش می دهد.یک متد increment که مقدار counter را یک بار کاهش می دهد.let counter = 0; class Counter { getInstance() { return this; } getCount() { return counter; } increment() { return ++counter; } decrement() { return --counter; } }البته کلاس بالا معیارهای یک Singleton را ندارد! یک Singleton فقط باید بتواند یک بار نمونه سازی کند. اما در حال حاضر، ما می توانیم چندین نمونه از کلاس Counter ایجاد کنیم.let counter = 0; class Counter { getInstance() { return this; } getCount() { return counter; } increment() { return ++counter; } decrement() { return --counter; } } const counter1 = new Counter(); const counter2 = new Counter(); console.log(counter1.getInstance() === counter2.getInstance()); // falseبا دوبار فراخوانی متد new، counter1 و counter2 را برابر با نمونه های مختلف قرار می دهیم. مقادیر بازگردانده شده توسط متد getInstance در counter1 و counter2 مرجع را به نمونه های مختلف برمی گرداند: آنها یکی نیستند!بیایید مطمئن شویم که فقط یک نمونه از کلاس Counter می تواند ایجاد شود.یک راه برای اطمینان از اینکه فقط یک نمونه می تواند ایجاد شود، ایجاد متغیری به نام instance است. در سازنده Counter، می‌توانیم هنگام ایجاد یک نمونه جدید، نمونه را برابر با ارجاع به نمونه موجود قرار دهیم. می‌توانیم با بررسی اینکه آیا متغیر instance قبلاً مقداری داشته است، از نمونه‌ سازی های جدید جلوگیری کنیم. اگر متغییر از قبل مقدار داشت باشد پس یک نمونه از قبل وجود دارد و این نباید اتفاق بیفتد: یک خطا باید به کاربر اطلاع داده شود.let instance; let counter = 0; class Counter { constructor() { if (instance) { throw new Error(&quotYou can only create one instance!&quot); } instance = this; } getInstance() { return this; } getCount() { return counter; } increment() { return ++counter; } decrement() { return --counter; } } const counter1 = new Counter(); const counter2 = new Counter(); // Error: You can only create one instance!عالی شد! حالا دیگر قادر به ایجاد چندین نمونه نیستیم.بیایید نمونه Counter را از فایل counter.js اکسپورت کنیم. اما قبل از انجام این کار، باید نمونه را نیز freez کنیم. متد Object.freeze مطمئن می شود که کدهای دیگر نمی تواند Singleton را تغییر دهد. ویژگی‌های موجود در نمونه فریز شده را نمی‌توان اضافه یا اصلاح کرد، که خطر رونویسی تصادفی مقادیر Singleton را کاهش می‌دهد.let instance; let counter = 0; class Counter { constructor() { if (instance) { throw new Error(&quotYou can only create one instance!&quot); } instance = this; } getInstance() { return this; } getCount() { return counter; } increment() { return ++counter; } decrement() { return --counter; } } const singletonCounter = Object.freeze(new Counter()); export default singletonCounter;بیایید نگاهی به برنامه ای بیندازیم که مثال Counter را پیاده سازی می کند. ما فایل های زیر را داریم:counter.js: شامل کلاس Counter است و یک نمونه Counter را به طور پیش فرض اکسپورت می کندindex.js: ماژول های redButton.js و blueButton.js را بارگیری می کندredButton.js: Counter را ایمپورت می کند و متد increment counter را به عنوان شنونده رویداد به دکمه قرمز اضافه می کند و با فراخوانی متد getCount مقدار فعلی شمارنده را در کنسول نمایش می دهد.blueButton.js: Counter را ایمپورت می کند و متدincrement counter را به عنوان شنونده رویداد به دکمه آبی اضافه می کند و با فراخوانی متد getCount مقدار فعلی شمارنده را در کنسول چاپ می کند.هم blueButton.js و هم redButton.js نمونه مشابهی را از counter.js وارد می کنند. این نمونه به عنوان شمارنده در هر دو فایل وارد می شود.وقتی متد increment را در redButton.js یا blueButton.js فراخوانی می کنیم، مقدار ویژگی counter در نمونه Counter در هر دو فایل به روز می شود. فرقی نمی کند که روی دکمه قرمز یا آبی کلیک کنیم: یک مقدار بین همه نمونه ها به اشتراک گذاشته می شود. به همین دلیل است که شمارنده همچنان یک عدد افزایش می‌یابد، حتی اگر متد را در فایل‌های مختلف فراخوانی کنیم.معایبمحدود کردن نمونه‌سازی فقط به یک نمونه می‌تواند به طور بالقوه فضای زیادی را در حافظه ذخیره کند. به جای اینکه مجبور باشیم هر بار حافظه را برای یک نمونه جدید تنظیم کنیم، فقط باید حافظه را برای آن یک نمونه تنظیم کنیم که در سراسر برنامه به آن ارجاع داده شده است. با این حال، Singleton ها در واقع یک ضد الگو در نظر گرفته می شوند و می توان (یا باید) در جاوا اسکریپت از آنها اجتناب کرد.در بسیاری از زبان های برنامه نویسی، مانند جاوا یا C++، امکان ایجاد مستقیم اشیاء به روشی که در جاوا اسکریپت هست وجود ندارد. در آن زبان های برنامه نویسی شی گرا، ما نیاز به ایجاد یک کلاس داریم که یک شی ایجاد می کند. آن شی ایجاد شده دارای مقدار instance کلاس است، درست مانند مقدار نمونه در مثال جاوا اسکریپت.با این حال، پیاده سازی کلاس نشان داده شده در مثال های بالا در واقع overkill است. از آنجایی که می‌توانیم مستقیماً اشیاء را در جاوا اسکریپت ایجاد کنیم، می‌توانیم به سادگی از یک شی معمولی برای رسیدن به همان نتیجه استفاده کنیم. بیایید به برخی از معایب استفاده از Singletons بپردازیم!استفاده از یک شی معمولیبیایید از همان مثالی که قبلا دیدیم استفاده کنیم. با این حال، این بار، counter به سادگی یک شی است که شامل:یک خاصیت countیک متد increment که مقدار count را یک عدد افزایش می دهدیک متد decrement که مقدار count را یک بار کاهش می دهد https://codesandbox.io/embed/competent-moon-rvzrr از آنجایی که اشیا با مرجع ارسال می شوند، هم redButton.js و هم blueButton.js یک مرجع را به یک شی counter وارد می کنند. تغییر مقدار count در هر یک از این فایل ها، مقدار counter را تغییر می دهد که در هر دو فایل قابل مشاهده است.آزمایش کنیمتست کدی که به یک Singleton متکی است ممکن است مشکل باشد. از آنجایی که نمی‌توانیم هر بار نمونه‌های جدیدی ایجاد کنیم، همه آزمایش‌ها به نمونه سراسری آزمون قبلی متکی هستند. ترتیب تست ها در این مورد مهم است و یک تغییر کوچک می تواند منجر به شکست کل مجموعه آزمایشی شود. پس از تست، برای بازنشانی تغییرات انجام شده توسط تست ها، باید کل نمونه را ریست کنیم. https://codesandbox.io/embed/sweet-cache-n55vi پنهان بودن وابستگیهنگام وارد کردن ماژول دیگر، در این مورد superCounter.js، ممکن است واضح نباشد که ماژول در حال وارد کردن یک Singleton است. در فایل های دیگر، مانند index.js در این مورد، ممکن است آن ماژول را وارد کرده و متدهای آن را فراخوانی کنیم. به این ترتیب، ما به طور تصادفی مقادیر موجود در Singleton را تغییر می دهیم. این می تواند منجر به رفتار غیرمنتظره شود، زیرا چندین نمونه از Singleton را می توان در سراسر برنامه به اشتراک گذاشت، که همه آنها نیز اصلاح می شوند.رفتارهای سراسرییک نمونه Singleton باید بتواند در کل برنامه ارجاع داده شود. از آنجایی که متغیرهای سراسری در دامنه کل برنامه در دسترس هستند، می‌توانیم به آن متغیرها در سراسر برنامه دسترسی داشته باشیم.داشتن متغیرهای سراسری به طور کلی به عنوان یک تصمیم بد در طراحی منظور می شود. شلوغ بودن و کثیفی دامنه سراسری می تواند به طور تصادفی مقدار یک متغیر سراسری را بازنویسی کند، که می تواند منجر به رفتارهای غیرمنتظره زیادی شود.در ES2015، ایجاد متغیرهای سراسری نسبتاً غیر معمول است. کلمه کلیدی let و const جدید با نگه داشتن متغیرهای اعلام شده با این دو کلمه کلیدی در محدوده بلوک، مانع از تداخل تصادفی متغییرهای توسعه دهنده به حوزه سراسری می شود. سیستم ماژول جدید در جاوا اسکریپت با امکان اکسپورت مقادیر از یک ماژول و ایمپورت کردن آن مقادیر در فایل‌های دیگر، ایجاد مقادیر قابل دسترس سراسری را بدون تداخل با دامنه سراسری برنامه را آسان‌تر می‌کند.با این حال، مورد استفاده رایج برای Singleton این است که نوعی وضعیت یکسان در سراسر برنامه وجود داشته باشد. وجود چندین بخش از کد شما به یک شیء قابل تغییر اعتماد می کند، می تواند منجر به رفتار غیرمنتظره شود.معمولاً بخش‌های خاصی از کد مقادیر سراسری را تغییر می‌دهند، در حالی که برخی دیگر آن داده‌ها را مصرف می‌کنند. ترتیب اجرا در اینجا مهم است: ما نمی خواهیم ابتدا داده ها را به طور تصادفی مصرف کنیم، زمانی که (هنوز) داده ای برای مصرف وجود ندارد! درک جریان داده هنگام استفاده از یک حالت سراسری می تواند با رشد برنامه بسیار مشکل باشد و ده ها مؤلفه بر هم اثرگذار خواهند بود.State management in Reactدر React، ما اغلب به جای استفاده از Singletons، از طریق ابزارهای مدیریت حالت مانند Redux یا React Context از راهکار متغییرهای سراسری استفاده می کنیم. اگرچه رفتار حالت سراسری آنها ممکن است شبیه به حالت یک Singleton به نظر برسد، اما این ابزارها به جای حالت تغییرپذیر Singleton، یک حالت فقط خواندنی را ارائه می دهند. هنگام استفاده از Redux، تنها کاهنده‌های عضو اصلی کلاس می‌توانند وضعیت را به‌روزرسانی کنند، پس از اینکه یک مؤلفه action را از طریق dispatcher ارسال می کند. اگرچه با استفاده از این ابزارها، جنبه‌های منفی داشتن یک متغیر سراسری به طور جادویی ناپدید نمی‌شوند، اما حداقل می‌توانیم مطمئن شویم که حالت(متغیر) سراسری آنطور که ما در نظر داریم جهش یافته است، زیرا مؤلفه‌ها نمی‌توانند مستقیماً وضعیت را به‌روزرسانی کنند. بهروز شفاعتی بهروز شفاعتی Thu, 02 Feb 2023 00:00:32 +0330 https://virgool.io/design-paterns/%D9%85%D9%82%D8%AF%D9%85%D9%87-%D8%A7%DB%8C-%D8%A8%D8%B1-%D8%A7%D9%84%DA%AF%D9%88%D9%87%D8%A7%DB%8C-%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C-vojpclicxjus الگوهای طراحی بخش اساسی توسعه نرم افزار هستند، زیرا راه حل های معمولی را برای مشکلات رایج در طراحی نرم افزار ارائه می دهند. به جای ارائه قطعات خاص نرم افزار، الگوهای طراحی صرفاً مفاهیمی هستند که می توانند برای مدیریت مضامین تکرار شونده به روشی بهینه استفاده شوند.طی چند سال گذشته، اکوسیستم توسعه وب با سرعت زیادی تغییر کرده است. در حالی که برخی از الگوهای طراحی شناخته شده ممکن است مانند گذشته ارزشمند و بهینه نباشند، برخی دیگر برای حل مشکلات مدرن با جدیدترین تکنولوژی ها تکامل یافته اند.React کتابخانه جاوا اسکریپت فیسبوک در 5 سال گذشته توجهات زیادی را به خود جلب کرده است و در حال حاضر پرتکرارترین فریم ورک دانلود شده در NPM در مقایسه با کتابخانه های جاوا اسکریپت رقیب مانند Angular، Vue، Ember و Svelte است. با توجه به محبوبیت React، الگوهای طراحی، اصلاح و بهینه شده اند و الگوهای جدیدی به منظور ارائه ارزش در اکوسیستم توسعه وب مدرن فعلی ایجاد شده اند. آخرین نسخه React ویژگی جدیدی به نام Hooks را معرفی کرد که نقش بسیار مهمی در طراحی اپلیکیشن شما دارد و می تواند جایگزین بسیاری از الگوهای طراحی سنتی شود.توسعه وب مدرن شامل انواع مختلفی از الگوها است. این پروژه مراحل پیاده سازی، مزایا و مشکلات الگوهای طراحی شده با استفاده از ES2015+ را پوشش می دهد، الگوهای طراحی خاص React و اصلاح و اجرای آنها با استفاده از React Hooks، و بسیاری الگوها و بهینه سازی های دیگر می تواند به بهبود برنامه وب مدرن شما کمک شایانی کند! بهروز شفاعتی بهروز شفاعتی Wed, 01 Feb 2023 22:16:34 +0330 https://virgool.io/@behrouz.shafaati/%D9%85%D9%85%D9%84%DA%A9%D8%AA-%D8%AF%D8%A7%D8%B1%DB%8C-%D8%AC%D8%AF%DB%8C%D8%AF-%D8%A2%D8%A8%D8%B1%DB%8C%DA%A9%D8%A7-%D8%A8%D8%B9%D8%AF-%D8%A7%D8%B2-%D8%A7%D9%86%D9%82%D9%84%D8%A7%D8%A8-tmwawutd9niw میدان جدلامروز 12 اکتبر 2022 است و چند هفته از حضور نیروهای ضد شورش و داوطلبان حامی حکومت آبریکا در خیابان‌های شهر می‌گذرد. آن‌ها در خیابان‌ هستند تا جلوی افراد ناراضی از حکومت آبریکا، که حاضر شده‌اند صدای اعتراضشان را به کف خیابان بیاورند، با سرکوب و ارعاب و دستگیری بگیرند. نام آن مردم را هم گذاشته‌اند اغتشاش‌گر. اما تعریف صادقانه‌ی آن می‌شود معترض. انقلابی هم شنیده‌ام.در این میان یک سوال، بحث داغی شده است. سوالی که اغلب از طرف حامیان آبریکا مطرح می‌شود و با قصد ارعاب در معترضان است: اگر در آبریکا انقلاب شود بعدش چه می‌شود؟و بعد خودشان جواب می‌دهند که اولا هیچ رهبر، حزب یا شیوه‌ی جایگزینی برای اداره‌ی مملکت نداریم و کشورمان تجزیه می‌شود و مثل سوریه و تونس و لیبی و یه عالمه کشور دیگر در آسیا به آشوب کشیده می‌شود؛ و بعد معترضین می‌گویند نه ما بیدار و آگاه شده‌ایم و همه‌مان متحد هستیم و مثل آن آسیایی‌ها نمی‌شویم.بشقاب پرندههمانطور که این دو گروه مشغول بحث و زد و خورد بودند ناگهان یک بشقاب پرنده در وسط جبهه‌ی آن‌ها فرود آمد. همه سکوت کردند و نظاره‌گر بودند. هنگامی که گرد و غبار ناشی از فرود تمام شد، درب بشقاب باز شد و همه متحیر دیدند که یک اکیپ از بچه‌های سیلیکون از آن پیاده شدند.یکی از آن‌ها با جلو آمد، سکوت را شکست و گفت:موضوع بحث شما را شنیدیم و برایتان راه حلی از جنس تکنولوژی آورده‌ایم.چند لحظه‌ای مکث کرد و بعد ادمه داد: اما قبل از ارائه‌ی آن‌ می‌گویم این راه‌حل چه مشکلات مهمی را حل می‌کند.مورد اول این‌که انحصار قدرت در هر نقطه‌ای از جهان که وجود داشته باشد، کسی که قدرت در دست اوست را دیکتاتور می‌کند. خواه یک فرد باشد یا یک حزب. این رفتار طبیعی است که وقتی کسی تمام قدرت را در اختیار دارد برای بقای خودش از آن استفاده کند و مخالفان و منتقدانش را نابود کند. انحصار قدرت یک مشکل است و پیشنهاد ما آن را حل می‌کند.مورد دوم این است که ما همیشه بدون این‌که نیت واقعی یا صلاحیت یک شخص را بدانیم او را به عنوان مسئول یا نماینده انتخاب می‌کنیم و بعد از اینکه قدرت را در اختیارش گذاشتیم و عملکردش را دیدیم متوجه می‌شویم که انتخاب درستی داشته‌ایم یا نه. این هم طبیعی است؛ ولی آن‌چه سخت می‌شود پس گرفتن قدرت از اوست هنگامی که دیگر نمی‌خواهیمش و او در برابر رفتن مقاومت می‌کند و ناگهان می‌بینیم سال‌های زیادی از عمرمان با حسرت و در خاک و خودن رفته است. پس گرفتن قدرت، از شخصی که قدرت را به او داده‌ایم یک مشکل است که پیشنهاد ما آن را حل می‌کند.مورد سوم قوانینی است که توسط عده‌ای قانون گذار فاقد صلاحیت نوشته می‌شود که بیشتر بدرد خودشان می‌خورد و در راستای منافع خودشان است تا مردم؛ و بعد از تصویبشان می‌شوند آش کشک خاله و ابد و یک روز گریبان ملت را می‌گیرند و می‌شوند بلای جان.تصویب قوانینی که خواسته‌ی اکثر ملت و برای منفعت مملکت خوب نیست هم یک مشکل است و پیشنهاد ما آن را حل می‌کند.راه حلو فرد سیلیکونی ادامه می‌دهد: تمام نظام‌های موجود در دنیا برای قبل از اینترنت و تکنولوژی‌های نو است و صاحبان قدرت هم از این وضعیت بسیار خرسند هستند چرا که اگر خواص اینترنت را در مملکت‌داری آن طور که امکانش هست دخیل کنند انحصار قدرت را از دست می‌دهند. پس هیچ وقت به خودی خود این کار را نمی‌کنند. بلکه این راه حل باید توسط خود مردم پیاده شود و مورد استفاده قرار گیرد. راه حل ما یک سیستم بر بستر اینترنت است که دو بخش اصلی دارد:انتخاب یک مسئول الان در آبریکا 3 سازمان و یک ریئس کل وجود دارد که می‌توانیم ریئس کل را برداریم و سازمان‌ها را تا حدی منطقی افزایش دهیم.مثلا بشوند سازمان‌های پیشرفت و توسعه، نظارت و بررسی، بانک و اقتصاد، امنیت و آرامش(پلیس)، دفاع، آموزش و تعالی، محیط زیست و ... . البته که این‌ سازمان‌ها صرفا مثال بود. بعد با استفاده از یک پلتفرم مبتنی بر اینترنت برای هر کدام یک مدیر(یا شورا) انتخاب کنیم. هر کسی که خواست برای مدیریت یک سازمان کاندید می‌شود و هر کس که بیشترین رای را آورد، قدرت اجرایی به وی داده می‌شود. نکته‌ی مهم و متمایز این پلتفرم این است که ریئس کل یا یک حزب خاص قدرت را در اختیار ندارد و هر زمانی که حتی یک نفر از این مدیر ناراضی باشد می‌تواند رای به برکناری مدیر بدهد و آن مدیر هم با توجه به سطح رضایت مردم وقت دارد خودش را اصلاح کند. مثلا فرض کنید یک نفر به عنوان مدیر با حداکثر آراء انتخاب می‌شود ولی بعد از چند وقت مردم متوجه می‌شوند این مدیر صلاحیت کافی را ندارد یا خلاف وعده‌هاش عمل می‌کند و هر وقت هر کسی به این نتیجه برسد به عزل مدیر رای می‌دهد و زمانی که بیشتر مردم درخواست عزل این مدیر را بدهند مدیر بر کنار می‌شود. مدت مدیریت هر مدیر زمان مشخصی ندارد و صرفا به رضایت مردم از او بستگی دارد.قانون گذاریسیستم مجلس و نمایندگان وجود داشته باشد. هر نماینده با روش بالا انتخاب یا عزل شود. در این سیستم کار نماینده‌‌گان مجلس بیشتر شفاف‌سازی، توضیح تمام ابعاد و اثرات جانبی و تاخیری یک قانون خواهد بود. به این صورت که وقتی قانونی برای تصویب شدن ارائه شود هر کس مثلا 24 ساعت (مدتی محدود و ثابت) زمان دارد که با استفاده از این پلتفرم رای موافق یا مخالف به آن قانون بدهد. بعد از آن زمان نماینده‌ رای خواهد داد که رای وی برابر با افراد حوزه‌ی انتخابی آن نماینده‌ است که در طی 24 ساعت گذشته به هر دلیلی رای نداده‌اند. در نهایت رای‌ها با هم جمع می‌شود و تعیین می‌شود که این قانون توسط مردم پذیرفته شود یا نه.به عنوان مثال فرض کنیم قانونی قرار است تصویب شود و تعداد کل رای دهندها 10 نفر است. در طی 24 ساعت 7 نفر از مردم رای می‌دهند که 5 نفر از آن‌ها موافق و 2 نفر مخالف آن قانون هستند. بعد از 24 ساعت نماینده رای موافق می‌دهد که رای وی ارزش 3 رای را خواهد داشت. در نهایت این قانون دارای 8 رای مثبت و 2 رای منفی بوده و تصویب می‌شود.نکته ی مهم این سیستم پویا بودن آن است. یعنی هر زمانی که اکثریت مردم یک قانون یا مدیر را نخواهند می‌توانند خیلی راحت نظرشان را نسبت به آن اعمال کنند.بشقاب پرنده می‌رودهنگامی که صحبت‌هایش تمام شد ناگهان کسی داد زد: این سیستمی که تو گفتی سراسر اشکال است. وی در پاسخش گفت: حق با تو است ولی شدنی است و به مرور زمان همه چیز بهتر می‌شود و افراد شایسته و وطن پرست مدیریت امور را بدست می‌گیرند. تغییر، انجام کارهای جدید و خروج از دایره‌ی امن زندگی ترسناک به نظر می‌رسد ولی هنگامی که از آن خارج شوی می‌گویی ای کاش زودتر این کار را می‌کردی.شخصی دیگر پرسید: چه کسی این سیستم را برایمان بسازد؟در پاسخش گفت: در ایران متخصصان زیادی وجود دارد که ظاهرا آن‌ها را نمی‌خواهند. یکی نامش #جادی است و آن‌قدر نمی خواهندش که در زندانش کرده‌اند. از او استفاده کنید.بعد از پاسخ به این سوال اکیپ بچه‌های سیلیکون به بشقاب‌شان سوار شدند و در گرد خاک پرواز ناپدید شدند. بهروز شفاعتی بهروز شفاعتی Wed, 12 Oct 2022 23:29:23 +0330 https://virgool.io/@behrouz.shafaati/%DB%8C%DA%A9-%D8%AC%D8%A7%DB%8C%DA%AF%D8%B2%DB%8C%D9%86-%D8%A8%D9%87%D8%AA%D8%B1-%D8%A8%D8%B1%D8%A7%DB%8C-create-react-app-kfg69onk4jco اگه شما برنامه نویس ری اکت هستید حداقل یک بار از create-react-app استفاده کردید و دستوری مثل زیر رو در کنسول اجرا کردید:npx create-react-app my-appو بعد از اجرای اون خروجی زیر در کنسولتون ظاهر شده:Installing packages. This might take a couple of minutes. Installing react, react-dom, and react-scripts with cra-template... added 1394 packages in 44s 209 packages are looking for funding run `npm fund` for details Initialized a git repository. Installing template dependencies using npm... added 55 packages in 4s 209 packages are looking for funding run `npm fund` for details Removing template package using npm... removed 1 package, and audited 1449 packages in 3s 209 packages are looking for funding run `npm fund` for details 6 high severity vulnerabilitiesاوکی، شما الان تقریبا 1,500 پکیج با کلی آسیب پذیری دارید.می‌خوایین یه چیز ترسناک ببینید؟! اندازه پوشه‌ی node_modules رو یه چک بکنیم:du -hc -s node_modules # 318M node_modulesاگه بخاییم یه مصداق واقعی برای این حجم از داده در دنیای برنامه نویسی بیاریم میشه عکس زیر:متعجبم از اینکه چرا این روش پیشنهاد شدس، ولی خوشبختانه تنها راه نیست.All-in-one: Viteبسته Vite یک جایگزین بهتر برای ایجاد اولیه و از پیش تنظیم شده چند فریمورک از جمله React است که می‌توان با یا بدون TypeScript از آن استفاده کرد.برای ساختن یک اپ با Vite دستور زیر رو باید اجرا کنیم:npm create vite@latest my-vite-react-app # ✔ Select a framework: › react # ✔ Select a variant: › react # # or # npm create vite@latest my-vite-react-app -- --template reactبعد به مسیر روت پروژه میریم و پکیچ‌های مورد نیاز رو نصب می‌کنیم:cd my-vite-react-app && npm installو نهایتا در زمانی کمتر پروژه‌ای داریم با پکیج‌های خیلی کمترتر:added 87 packages, and audited 88 packages in 5s 8 packages are looking for funding run `npm fund` for details found 0 vulnerabilitiesو تقریبا اندازه‌ی node_modules هم 10 برابر کمتر شده:du -hc -s node_modules # 37M node_modulesاگه برای Create-React-app به دنبال یک جایگزین هستید که تمام قابلیت‌های اون رو هم داشته باشه ویت همونیه که لازم دارید. بهروز شفاعتی بهروز شفاعتی Thu, 15 Sep 2022 16:49:41 +0430