اخیراً سعی کردم برخی از پروژه های متن باز خود را ارتقا دهم. آنها با استفاده از برنامه Cre-react-app در حدود سال 2019 ساخته شدند و من می خواستم به نسخه جدیدتر NodeJS و Jest ارتقا دهم. این به من اجازه می‌دهد از به‌روزرسانی‌های امنیتی، رفع اشکال‌ها، بهبود سرعت و آپشن های جدیدی که اکوسیستم از آن زمان توسعه داده است، استفاده کنم.

متأسفانه، این کار به سادگی اجرای $ nvm use 18 و حرکت به سمت غروب آفتاب نبود. خوشبختانه، اگر تمام مراحل را دنبال کنید، بسیاری از موانع مهم را پشت سر می گذارید و با موفقیت ارتقا می دهید. در این راهنما، من تمام دانشی را که آرزو می‌کردم در این فرآیند بدانم به اشتراک می‌گذارم. هدف این است که برنامه React خود را با استفاده از Node 18+ و Jest 29+ دریافت کنید، در حالی که ارتقای خائنانه به React Scripts 5 را انجام ندهید.

اگر می‌توانید به React Scripts 5 ارتقا دهید (که برای اکثر برنامه‌های دنیای واقعی غیرعملی است)، من آن مسیر را به جای آن به شدت توصیه می‌کنم. این به این دلیل است که جدیدترین نسخه CRA بسیاری از مشکلات مربوط به وابستگی‌های قدیمی‌تر را برطرف می‌کند، مانند شکل‌های بازگشتی MD4 envelope یا process() که در این آموزش به صورت دستی به آنها رسیدگی می‌کنیم. اگر می‌توانید نسخه 5 را ارتقا دهید، نسخه‌های Node 18+ باید کاملاً کار کنند.

متأسفانه، رفتن به React Scripts 5 تغییرات مهمی را ایجاد می‌کند، که بیشتر به دلیل ارتقاء به Webpack 5 است. در حالی که بسیاری از برنامه‌های کوچک/سطح آموزشی می‌توانند نسبتاً به راحتی ارتقاء یابند، هر برنامه دنیای واقعی برای ارتقاء با یک مسیر پر فراز و نشیب مواجه است.

اگر رویکرد ارتقاء React Scripts 5 برای شما کار نمی کند، می توانید آنچه را که در زیر نوشته ام در مورد کارکرد ارتقاء Node در حالی که همچنان در React Scripts 4 باقی مانده اید، دنبال کنید. در پایان این صفحه، من یک مطلب کوچک نوشته ام. توجه داشته باشید در مورد سفر من تلاش برای ارتقاء v5 .

مسیر ارتقای همه افراد متفاوت خواهد بود، به خصوص با توجه به Jenga از وابستگی‌های npm و عدم نگهداری نسبی از اسکریپت‌های React برنامه Create React در سال‌های اخیر.

اینها مراحل ارتقاء است که من با چند برنامه مختلف React امتحان کرده‌ام، اما ممکن است با مشکلاتی روبرو شوید که من خودم با آن مواجه نشده‌ام. گوگل در این موارد بهترین دوست شماست و اغلب شما را به Stackoverflow، مشکلات GitHub، آموزش های دیگر و شاید حتی کد منبع هدایت می کند. نترس؛ شما قادر خواهید بود آن را کشف کنید!

توجه: در این آموزش، من به Create React App به عنوان CRA اشاره می کنم. React Scripts نام بسته نصب شده ای است که تمام تنظیمات ایجاد شده توسط دستور Create React App را خلاصه می کند و در بیشتر موارد می بینید که منابع آنلاین هر دو را به جای یکدیگر استفاده می کنند.

فهرست مطالب

پیش نیازها

چگونه هر مرحله را اعتبار سنجی کنیم

نحوه برخورد به اسکریپت های React v4.0.3

چگونه نسخه Node را به 18 برسانیم
- درک مسئله MD4

نحوه خارج کردن اسکریپت های React
– نحوه اضافه کردن Linter Ignores برای فایل های خارج شده
– نحوه به روز رسانی Dockerfile و سایر فرآیندهای ساخت با پوشه های خارج شده
– چگونه مسیرهای مطلق را برای جست رفع کنیم
– نحوه به روز رسانی Dockerfile و سایر فرآیندهای ساخت با پوشه های خارج شده

نحوه لغو Webpack MD4 به SHA256

نحوه ارتقاء به آخرین نسخه Jest
– نحوه برخورد به Jest 28
– نحوه تنظیم صریح jsdom به عنوان محیط تست
– نحوه تعمیر نوع بازگشت ترانسفورماتور برای process() و processAsync()
– چگونه جست را به ۲۹ برسانیم

تا کجا باید NodeJS را ارتقا دهم؟

آیا هنوز باید از اسکریپت های Create React استفاده کنید؟ چه جایگزین هایی وجود دارد؟

نتیجه

روش دیگر: نحوه ارتقاء به React Scripts 5.0.1

پیش نیازها

برای دنبال کردن این راهنما، باید یک برنامه React داشته باشید که:

با create-react-app v4 ایجاد شده یا برای استفاده از react-scripts v4 ارتقا یافته است. من این آموزش را روی هر دو سناریو تست کرده ام.

در نود 16 اجرا می شود

اگر NodeJS را پشت سر 16 اجرا می کنید، من به شدت پیشنهاد می کنم به نسخه 16 ارتقا دهید. مسیر ارتقا به 16 خیلی بد نیست، اما جهش از 16 به 18 باعث ایجاد مشکلاتی در پیش فرض های CRA 4 می شود.

برنامه ما همچنین jest (v26) را اجرا کرد، رایج ترین چارچوب آزمایشی در React و به طور پیش فرض در CRA v4 ارسال شد. اگر Jest را اجرا نمی کنید، می توانید مراحل مربوط به آن را نادیده بگیرید.

ما همچنین از yarn استفاده می‌کردیم، اما اگر از هر runner/package manager دیگری مانند npm استفاده می‌کنید، فرآیند باید با نحو متفاوتی یکسان باشد.

در حالت ایده‌آل، شما مقداری پوشش آزمایشی دارید تا مطمئن شوید که همه چیز بین نسخه‌ها خراب نمی‌شود، پس ارزش آن را دارد که قبل از هر گونه ارتقا، کمی وقت بگذارید و تست‌های یکپارچه‌سازی و واحد را بنویسید.

من توصیه می کنم از کنترل نسخه مانند git برای هر مرحله در حین کار روی یک شاخه استفاده کنید. من بیش از سه زمان مختلف با استفاده از استراتژی‌های ارتقای مختلف شروع کردم تا زمانی که به چیزی رسیدم که جواب داد. اگر با آنها آشنایی ندارید، در اینجا یک معرفی سریع برای شاخه های git آورده شده است.

همچنین توصیه می کنم از nvm (Node Version Manager) برای تعویض سریع نسخه ها استفاده کنید. شما نیازی به استفاده از آن ندارید، و بسیاری از گزینه‌های جایگزین دیگر برای مدیریت نسخه‌ها وجود دارد، اما تغییر سریع را با nvm use بسیار آسان می‌کند. من از nvm syntax در این آموزش استفاده خواهم کرد، اما باید برای ابزار شما تقریباً مشابه باشد.

چگونه هر مرحله را اعتبار سنجی کنیم

در طول آموزش، برای اطمینان از اینکه کارها همچنان کار می کنند، موارد زیر را اجرا خواهید کرد:

$ yarn build – ساخت انتها به انتها برای تحلیل بسیاری از مسائل در سطح کتابخانه

$ yarn test - تست های رگرسیون برای گرفتن شکست در عملکرد

$ yarn start – اسکریپت های شروع کننده برای گرفتن بسیاری از اشکالات اولیه.

اگر مراحل اعتبار سنجی بیشتری دارید (ساخت CI، داکر، محیط های مرحله بندی، آزمایش دود)، مطمئن شوید که از قبل کار می کنند و از آنها در طول فرآیند برای تأیید صحت عملکرد ارتقاء استفاده کنید. برای بقیه آموزش، من به آنها به عنوان دستورات اعتبار سنجی اشاره می کنم.

قبل از شروع ارتقا، مطمئن شوید که تمام مراحل اعتبار سنجی روی Node 16 و CRA 4 فعلی شما کار می کنند. در پایان آموزش، همه این مراحل اعتبار سنجی نیز باید کار کنند. در نهایت، مطمئن شوید که پس از انجام تمام مراحل ارتقا، از برنامه React خود به طور گسترده به عنوان آزمایش نهایی استفاده کنید.

گاهی اوقات، ممکن است نیاز به $ rm -rf node_modules و $ rm package.lock.json / $ rm yarn.lock داشته باشید زیرا ممکن است برخی از تغییرات کتابخانه به درستی منتشر نشوند. در حالت ایده‌آل، نیازی به انجام این کار نخواهید داشت، اما از آنجایی که فقط همه بسته‌ها را دوباره دانلود می‌کند، نسبتاً ایمن است.

نحوه برخورد به اسکریپت های React v4.0.3

بسته به زمانی که پروژه خود را از CRA شروع کرده اید، احتمالاً در نسخه های مختلف نسخه 4 خواهید بود. ابتدا، ما به آخرین نسخه مینور ارتقا می دهیم تا بقیه مراحل ارتقا را هموار کنیم.

نباید هیچ تغییر مهمی بین نسخه‌های کوچک وجود داشته باشد، اما مطمئن شوید که آن را به صورت تدریجی در package.json خود ارتقا دهید و از 4.0.0 -> 4.0.1 -> 4.0.2 -> 4.0.3 . رفتن به 4.0.3 روند ارتقای شما را ساده می کند زیرا این به روز رسانی های جزئی دارای بسیاری از اشکالات مفید، کتابخانه و رفع وابستگی هستند در حالی که در حال حاضر کار جدیدی ایجاد نمی کنند.

من بعد از هر مرحله $ yarn install اجرا کردم و سپس دستورات اعتبارسنجی خود را تحلیل کردم تا مطمئن شوم همه چیز هنوز کار می کند.

 ... "dependencies": { "react-scripts": "4.0.1", ... }, ...

در پروژه هایم با هیچ مشکلی مواجه نشدم، اما مسافت پیموده شده شما ممکن است متفاوت باشد. اسناد رسمی تغییرات CRA v4 دارای فهرست ی از تغییرات کوچک و مراحل ارتقاء بین نسخه‌ها است که دلایل را محدود می‌کند.

چگونه نسخه Node را به 18 برسانیم

پس از اطمینان از اینکه دستورات اعتبارسنجی شما بر روی Node 16 فعلی شما کار می کنند، نسخه خود را روی 18 تنظیم کنید. سپس ما روی رفع تمام دستورات اعتبارسنجی کار می کنیم تا زمانی که همه آنها کار کنند. گاهی اوقات ممکن است به 16 برگردید تا مطمئن شوید که هنوز در نسخه قدیمی‌تر کار می‌کند.

در خط فرمان خود، موارد زیر را اجرا کنید:

 $ nvm install 18 $ nvm use 18

توجه: اگر فایل .nvmrc دارید، می توانید از شماره نسخه در دستورات nvm install و nvm use صرفنظر کنید. با تغییر نسخه های گره، فایل را به روز کنید.

متأسفانه، اگر $ yarn start یا $ yarn build را امتحان کنید، بلافاصله با خطای رمزنگاری که از openssl می آید، مواجه می شوید که تمام رمزگذاری ها را با استفاده از MD4 مسدود می کند. این خطای اصلی مسدود کردن ارتقاء به Node 18 در CRA 4 است.

 Error: error:0308010C:digital envelope routines::unsupported

درک مسئله MD4

MD4 یک الگوریتم رمزگذاری قدیمی از دهه 1990 است و از سال 1995 ( ویکی پدیا ) بسیار ناامن در نظر گرفته شده است. OpenSSL از نسخه 3 به بعد، MD4 را به طور پیش فرض تغییر داد تا پشتیبانی نشود، اما می توان آن را با یک پرچم مجاز غیرایمن میراث در سیستم شما فعال کرد openssl یا --openssl-legacy-provider اگر آن را به اسکریپت گره/CRA خود اضافه کنید (به Node مراجعه کنید). اسناد ).

این یک راه حل به ظاهر ساده است، اما این بیشتر آخرین راه حل است، زیرا اجازه رمزنگاری ناامن به طور کلی ایده بدی است و OpenSSL الگوریتم را کاملاً به دلایلی غیرفعال کرده است.

توجه: اگر کنجکاو هستید، Webpack بیش از 1000 پاسخ درباره این موضوع دارد که ممکن است چیز مفیدی داشته باشد. نسخه‌های بعدی Webpack همچنین در نهایت الگوریتم بهتری به نام xxHash را مجاز کردند ، یک پیاده‌سازی داخلی MD4 wasm را اضافه کردند، و یک گزینه پیکربندی جدید به نام قطعی را اضافه کردند که از این موضوع دوری می‌کند.

اگر خودمان آن را اصلاح نمی‌کنیم، به‌شدت توصیه می‌کنم این پاسخ StackOverflow را برای یک مرور کلی سریع از گزینه‌های اصلی بخوانید. از آنجایی که ارتقاء وابستگی‌ها در اینجا امکان‌پذیر نیست، و ما نمی‌خواهیم در نسخه قدیمی Node بمانیم یا اجازه الگوریتم‌های ناامن را بدهیم، باید برای رفع آن به درونی‌های CRA بپردازیم.

نحوه خارج کردن اسکریپت های React

CRA برای یک تجربه پیکربندی صفر برای React Apps طراحی شده است که به شما امکان می دهد فقط روی منطق کسب و کار خود تمرکز کنید.

هنگامی که می خواهید تغییر پیکربندی را شروع کنید، CRA روش داخلی برای لغو هیچ گزینه ای ندارد. درعوض، دستوری به نام eject ارائه می‌دهد که تمام قسمت‌های داخلی CRA را در پروژه شما کپی می‌کند، در حالی که دستورات yarn/npm شما دست نخورده باقی می‌ماند و سپس اسکریپت‌های React را به طور کامل از پروژه شما حذف می‌کند. این یک اقدام یک طرفه است، پس مطمئن شوید که نسخه قبلی را در git ذخیره کرده اید.

 $ yarn eject

این یک دستور بزرگ است که بسیاری از فایل‌ها را در فهرست‌های config/ و scripts/ و همچنین فهرست بسته‌های شما را در package.json تغییر می‌دهد. پس از اجرای مجدد yarn install ، مطمئن شوید که تمام دستورات اعتبارسنجی خود را اجرا می کنید تا مطمئن شوید که همه چیز همچنان در Node 16 کار می کند زیرا هیچ چیز از نظر عملکرد نباید تغییر می کرد.

از طرف دیگر، اگر نمی‌خواهید eject امتحان کنید، راه‌حل‌هایی مانند:

CRACO از مکانیزم نادیده گرفتن هوشمندانه استفاده می کند تا به شما این امکان را بدهد که همچنان از React Scripts در حین سفارشی سازی استفاده کنید. شروع و چرا کراکو را ساختم را بخوانید. با نسخه 6.4.5 برای CRA v4 شروع کنید.

Patch-package تغییرات بسته npm خاصی را برای پروژه شما اعمال می کند و سپس پچ را با تیم/پروژه خود به اشتراک می گذارید. برای این راهنما، شما react-scripts با بسته وب و تنظیمات پیکربندی اصلاح شده وصله خواهید کرد.

Forking CRA با تغییرات خودتان. به این ترتیب همچنان می‌توانید CRA پیکربندی صفر را بدون هک برای وصله در عملکرد جدید نگه دارید، اما این ممکن است پیچیده شود. در اینجا راهنمایی است که من به صورت آنلاین دیدم: سفارشی‌سازی Cre-react-app: چگونه الگوی خود را بسازیم .

همچنین React-app-rewired برای هدفی مشابه وجود دارد، اما در حال حاضر عمدتاً نگهداری نشده است و برای نسخه‌های قدیمی‌تر CRA در پشت نسخه ۴ در نظر گرفته شده است.

نحوه اضافه کردن Linter Ignores برای فایل های خارج شده

بسیاری از فایل‌های جدید از پیکربندی خارج‌شده ممکن است از قوانین پروژه موجود شما پیروی نکنند. تا زمانی که کار به‌روزرسانی تمام نشده است، توصیه می‌کنم نادیده‌گیری‌های جدید را در بالای فایل‌های خراب اضافه کنید، مانند:

 /* eslint-disable import/order */ // rest of file ...

پس از اتمام کل آموزش، با خیال راحت به عقب برگردید و سعی کنید برخی از مشکلات لینتر را برطرف کنید، اما ممکن است اشکالی نداشته باشد که این فایل ها را همانطور که هست رها کنید زیرا به ندرت برای تغییر چیزی وارد آن می شوید.

چگونه مسیرهای مطلق را برای جست رفع کنیم

در package.json شما، گزینه شوخی "testRunner" ممکن است در مسیر مطلقی رمزگذاری شود که فقط در رایانه شما منطقی است. پس ، شما می خواهید آن را به مسیری بر اساس دایرکتوری ریشه پروژه خود تغییر دهید.

در حالی که این ممکن است برای توسعه محلی شما خوب عمل کند، اما برای همه همکاران یا رایانه های ابری خراب می شود.

 ... "jest": { ... "testRunner": "/my/computer/path/project_name/node_modules/jest-circus/runner.js", ... }, ...

ما از گزینه <rootDir> استفاده می کنیم که توسط Jest ارائه شده است:

 ... "jest": { ... "testRunner": "<rootDir>/node_modules/jest-circus/runner.js", ... }, ...

ممکن است مجبور نباشید این کار را در همه پروژه‌ها انجام دهید، اما "modulePaths" ممکن است به به‌روزرسانی نیز نیاز داشته باشد:

 ... "jest": { ... "modulePaths": [ "/my/computer/path/project_name/src" ] ... }, ...

فقط مرجع مسیر مطلق رایانه خود را حذف کنید:

 ... "jest": { ... "modulePaths": [ "src" ] ... }, ...

نحوه به روز رسانی Dockerfile و سایر فرآیندهای ساخت با پوشه های خارج شده

مطمئن شوید که پوشه‌های جدید خارج‌شده، scripts/ و config/ را در Dockerfile خود و سایر فرآیندهای ساختی که ممکن است در خارج از CRA استفاده می‌کنید، قرار دهید.

به عنوان مثال، Dockerfile دارای دایرکتوری های جدیدی است که CRA ایجاد کرده است و ما نیز قصد داریم آنها را کپی کنیم.

 ... COPY scripts scripts/ COPY config config/ ...

نحوه لغو Webpack MD4 به SHA256

بر اساس این پاسخ StackOverflow ، درست قبل از شروع تعریف module.exports به webpack.config.js اضافه می کنیم تا از SHA256 نسبتاً مدرن و ایمن تر به جای MD4 که در Webpack نیز تعبیه شده است استفاده کنیم:

 // ... // https://stackoverflow.com/a/78005686 const crypto = require("crypto"); const crypto_orig_createHash = crypto.createHash; crypto.createHash = algorithm => crypto_orig_createHash(algorithm == "md4" ? "sha256" : algorithm); // This is the production and development configuration. // It is focused on developer experience, fast rebuilds, and a minimal bundle. module.exports = function (webpackEnv) // ...

هنگامی که این مورد را تغییر دادید، خطاهای پاکت باید ناپدید شوند و دستورات اعتبارسنجی شما اکنون باید برای Node 18 کار کنند.

نحوه ارتقاء به آخرین نسخه Jest

eject همچنین پیکربندی Babel را که برای درست کردن نسخه‌های جدیدتر Jest استفاده می‌شود، نشان می‌دهد. این برای نسخه 26 عالی عمل می کند، اما انتقال پیکربندی CRA به آخرین نسخه (v29 در زمان نگارش) چند مرحله دیگر دارد.

شما باید از طریق v26 -> v28 -> v29 (پرش از v27) برای همه وابستگی‌های Jest بروید. اگر از Jest 26 CRA v4 راضی هستید، این قسمت اختیاری است، اما تا زمانی که آن را خارج نکنید، از ارتقا به نسخه اخیر Jest جلوگیری می کنید.

من از Jest 27 صرف نظر می کنم زیرا به تغییر در config/jest/babelTransform.js نیاز دارد که در آن باید module.exports = babelJest.default.createTransformer({ to module.exports = babelJest.createTransformer({ . این یک باگ در نسخه 28 برطرف شده بود. با این وجود، اگر می‌خواهید از Jest 27 نیز عبور کنید، می‌توانید بقیه مراحل را با این تغییر دنبال کنید و سپس به صورت اختیاری آن را در Jest 28 برگردانید.

همچنین خواندن مقالات معرفی برای هر یک از ارتقاء نسخه Jest را به شدت توصیه می کنم:

Jest 27: پیش‌فرض‌های جدید برای Jest، نسخه 2021 ⏩

Jest 28: کاهش وزن و بهبود سازگاری 🫶

Jest 29: فرمت Snapshot تغییر می کند

بیشتر مشکلات مربوط به Jest 28 است که تغییرات اساسی زیادی دارد، اما بقیه مسیر ارتقاء نسبتاً ساده است.

نحوه برخورد به Jest 28

برای هر ارتقا، توصیه می‌کنم همه بسته‌های مرتبط با Jest را در package.json خود پیدا و جایگزین کنید، زیرا شماره‌های نسخه همه همگام‌سازی شده‌اند. هنگامی که اعداد را به روز کردید، فقط $ yarn install اجرا کنید:

 ... "devDependencies": { ... "babel-jest": "^28.1.3", ... "jest": "^28.1.3", "jest-circus": "^28.1.3", "jest-resolve": "^28.1.3", ... } ...

نحوه تنظیم صریح jsdom به عنوان محیط تست

اگر می‌خواهید آزمایش‌های خود را خارج از جعبه با $ yarn test اجرا کنید. این خطا را به شما می دهد:

 ● Validation Error: Test environment jest-environment-jsdom cannot be found. Make sure the testEnvironment configuration option points to an existing node module. Configuration Documentation: https://jestjs.io/docs/configuration As of Jest 28 "jest-environment-jsdom" is no longer shipped by default, make sure to install it separately.

در Jest 27، Jest محیط آزمایشی پیش‌فرض را تغییر داد تا برای محیط باطنی NodeJS سبک‌تر باشد. با این حال، ما یک برنامه frontend داریم، پس همچنان می‌خواهیم با یک محیط مرورگر شبیه‌سازی‌شده آزمایش کنیم که نسخه‌های قدیمی‌تر Jest مبتنی بر jsdom هستند.

برای رفع این مشکل، "jest-environment-jsdom" را به وابستگی های خود اضافه کنید و سپس $ yarn install اجرا کنید.

 ... "devDependencies": { ... "babel-jest": "^28.1.3", ... "jest": "^28.1.3", "jest-circus": "^28.1.3", "jest-resolve": "^28.1.3", "jest-environment-jsdom": "^28.1.3", ... } ...

نحوه تعمیر نوع بازگشت ترانسفورماتور برای process() و processAsync()

حالا، اگر yarn test اجرا کنید، این را دریافت خواهید کرد:

 FAIL src/App.test.js ● Test suite failed to run ● Invalid return value: `process()` or/and `processAsync()` method of code transformer found at "path/in/my/computer" should return an object or a Promise resolving to an object. The object must have `code` property with a string of processed code. This error may be caused by a breaking change in Jest 28: https://jestjs.io/docs/upgrading-to-jest28#transformer Code Transformation Documentation: https://jestjs.io/docs/code-transformation

این به این دلیل است که توابع process() که قبلاً یک رشته را برمی‌گرداند، اکنون انتظار یک شی با فرمت { code: `old_string_here` } را دارند.

برای رفع این مشکل، به پوشه config/jest خارج شده خود می رویم و شکل خروجی را برای همه فایل هایمان تغییر می دهیم. برای CSS، این تغییر یک خط است:

 // This is a custom Jest transformer turning style imports into empty objects. // http://facebook.github.io/jest/docs/en/webpack.html module.exports = { process() { return { code: 'module.exports = {};' }; }, getCacheKey() { // The output is always the same. return 'cssTransform'; }, };

و برای فایل‌ها، باید هر دو عبارت بازگشت شاخه را تغییر دهید:

 const path = require('path'); const camelcase = require('camelcase'); // This is a custom Jest transformer turning file imports into filenames. // http://facebook.github.io/jest/docs/en/webpack.html module.exports = { process(src, filename) { const assetFilename = JSON.stringify(path.basename(filename)); if (filename.match(/\.svg$/)) { // Based on how SVGR generates a component name: // https://github.com/smooth-code/svgr/blob/01b194cf967347d43d4cbe6b434404731b87cf27/packages/core/src/state.js#L6 const pascalCaseFilename = camelcase(path.parse(filename).name, { pascalCase: true, }); const componentName = `Svg${pascalCaseFilename}`; return { code: `const React = require('react')...` // pretty long string }; } return {code: `module.exports = ${assetFilename};` }; }, };

توجه: تا زمان نگارش، پیوند پیام خطا به آموزش راهنمای ارتقا کار نمی کند ، اما می توانید پیوند صحیح را در https://jest-archive-august-2023.netlify.app/docs/28 پیدا کنید. x/upgrading-to-jest28/ . همچنین یک پیوند بایگانی قدیمی‌تر وجود دارد اگر کار ن کرد.

چگونه جست را به 29 برسانیم

هنگامی که تمام مراحل اعتبار سنجی با Jest 28 کار می کند، ارتقاء به 29 باید روان تر باشد. فقط package.json خود را به روز کنید و $ yarn install را اجرا کنید:

 ... "devDependencies": { ... "babel-jest": "^29.7.0", "jest": "^29.7.0", "jest-circus": "^29.7.0", "jest-resolve": "^29.7.0", "jest-environment-jsdom": "^29.7.0" ... } ...

در این مرحله، $ yarn test باید به درستی با مجموعه آزمایشی موجود شما کار کند.

تا کجا باید NodeJS را ارتقا دهم؟

تلاش برای تصمیم گیری برای ارتقای نسخه های Node می تواند یک سوال دشوار باشد. با پیروی از مراحل بالا، من توانستم تمام نسخه های Node را تا آخرین نود 22 که کار می کند، به روز کنم.

در زمان نگارش، 18 نقطه توقف بسیار خوبی از نظر پشتیبانی فعلی و پشتیبانی اخیر ECMAScript است. اما اگر به دنبال تصمیم گیری هستید، سه عامل زیر مهم ترین هستند:

پشتیبانی از کتابخانه: به تمام کتابخانه‌های مهم خود نگاه کنید و ببینید آیا آنها ترجیح زیادی برای نسخه خاصی دارند یا برای نسخه‌های جدیدتر مشکل دارند. نسخه های بعدی Node معمولا بهتر هستند، اما گاهی اوقات کتابخانه های قدیمی وصله های مناسب را دریافت نمی کنند و ممکن است ارتقاء شما را مسدود کنند.

پنجره‌های پشتیبانی: نسخه‌های مختلف Node دارای پنجره‌ای هستند که نگه‌دارنده‌ها آن را تحت عنوان «تعمیر و نگهداری»، «فعال»، «جریان» یا «پشتیبانی نشده» در نظر می‌گیرند و با گذشت زمان، نسخه‌های قدیمی‌تر تعمیر و نگهداری را از دست می‌دهند. نسخه های زوج نیز LTS (پشتیبانی طولانی مدت) تعیین می شوند که برای مدت طولانی و آنچه برای اکثر افراد کار می کند پشتیبانی می کند. این وب سایت یک نمودار مفید برای این دارد: https://nodejs.org/en/about/previous-releases .

پشتیبانی از ویژگی های زبان: مشخصات ECMAScript همیشه با هر سال در حال تغییر است و استفاده از نحو جدیدتر با ساختارهای زیباتر همیشه یک ارتقاء کیفیت زندگی بزرگ است. من عاشق https://node.green/ هستم که جدولی از نسخه های Node در برابر ویژگی های نحوی ECMAScript با مثال های کد برای هر ویژگی دارد.

با توجه به فناوری‌هایی مانند Babel (همراه با Create React App)، نیازی نیست بیش از حد نگران کاربران نهایی وب‌سایت خود باشید، زیرا آپشن های Node جدیدتر به مواردی که با مرورگر سازگار هستند منتقل می‌شوند.

آیا هنوز باید از اسکریپت های Create React استفاده کنید؟ چه جایگزین هایی وجود دارد؟

در این آموزش، من تصمیم گرفتم از CRA خارج شوم تا به پیکربندی Webpack و Babel دسترسی پیدا کنم، و بسیاری از پروژه های CRA در نهایت برای انجام این کار نیز آمده اند. در حالی که اکوسیستم در حال تکامل است، تعمیر و نگهداری CRA تقریباً متوقف شده است.

من شخصاً به شخصی توصیه می‌کنم که امروز یک پروژه React ایجاد کند تا جایگزین‌های جدیدتری مانند Vite یا Parcel را امتحان کند که برنامه‌های شروع خوبی دارند که ساده و قابل درک هستند. متأسفانه، آنها ممکن است به اندازه آنچه که CRA ارائه می دهد، زنگ و سوت نداشته باشند، اما برای تقریباً همه توسعه های مدرن عملی به اندازه کافی خوب است.

در زمینه آموزش، آموزش‌های قدیمی من از create-react-app استفاده می‌کردند و این کمک بزرگی بود، اما آموزش‌های جدیدتر من از Vite استفاده خواهند کرد.

با این حال، تجربه برنامه و توسعه شما ممکن است بسیار متفاوت از تجربه من باشد. خواندن و یادگیری از این منابع را توصیه می کنم تا دیدگاه خود را شکل دهید:

مشکل GitHub با بیش از 200 پاسخ و 1000 واکنش در مورد اینکه آیا Create React App باید با Vite در اسناد رسمی جایگزین شود. همچنین دارای یادداشتی از سمت نگهدارنده CRA است که بسیاری از زمینه های مهم را توضیح می دهد که ارزش خواندن را دارد. نگهدارنده بسته نیز اظهار نظر بسیار خوبی کرد.

برخی از نظرات جالب ( یک ، دو ) در مورد اینکه چگونه CRA یک تجربه ساده و آسان برای استفاده از React را بدون نگرانی در مورد جهنم راه اندازی و تمرکز بر برنامه واقعی ایجاد کرد.

مقاله خبری توضیح می‌دهد که تیم React تصمیم گرفته است که توصیه Create React App را همراه با زمینه‌ای در پشت این و جایگزین‌های آینده متوقف کند.

نتیجه

در این مرحله، شما باید بتوانید تمام اسکریپت های اعتبارسنجی خود را اجرا کنید و برنامه ای داشته باشید که با Node 18+ و Jest 29+ کار می کند.

در یک دنیای ایده آل، شما با موانع مشابه من مواجه می شوید و همه چیز درست می شود. در واقع، برنامه هر کسی متفاوت است و اینترنت مملو از توسعه دهندگان متعددی است که این فرآیند ارتقا را با مشکلات مختلف پشت سر گذاشته اند.

من به شدت پیشنهاد می‌کنم در این فرآیند Google، StackOverflow، GitHub و اسناد رسمی کتابخانه را بهترین دوستان خود قرار دهید، و برای شما آرزوی موفقیت دارم!

روش دیگر: نحوه ارتقاء به React Scripts 5.0.1

این فراتر از محدوده این آموزش است، پس من در اینجا مختصرتر صحبت خواهم کرد - اما در اینجا اطلاعات کمی برای شروع شما وجود دارد.

پیشنهاد می‌کنم با تغییرات ثبت‌نام رسمی برای CRA v5 شروع کنید که شامل تمام تغییرات اصلی و همچنین برخی دستورالعمل‌های ارتقای نسخه است: https://github.com/facebook/create-react-app/blob/main/CHANGELOG.md .

دستیابی به نسخه نسبتاً آسان است، react-scripts روی 5.0.1 در package.json خود تنظیم کنید، اما قسمت سخت همه تغییرات شکسته است.

پیچیده ترین بخش ارتقاء، ارتقاء به Webpack 5 از Webpack 4 است. راهنمای رسمی Webpack To v5 from v4 را که نمای کلی خوبی دارد، بخوانید و به دنبال راهنماهای این ارتقاء در سراسر اینترنت باشید. چند مانع دیگر که ممکن است با آنها روبرو شوید:

برای @babel/helper-compilation-targets: 'opera_mobile' is not a valid target می توانید همانطور که در این نظر در ردیاب مشکل babel پیشنهاد شده است "not op_mob >= 1" به آرایه browserslist اضافه کنید. نظرات دیگر نیز ممکن است مفید باشد.

احتمالاً مجبور خواهید بود برای بسیاری از مراحل با استفاده از React Scripts eject یا چیزی شبیه CRACO نسخه 7 به قسمت‌های داخلی CRA دسترسی داشته باشید.

Webpack 5 دارای یک تغییر قطعی است که پشتیبانی از بسیاری از APIهای خاص مرورگر مانند os ، http ، را حذف می‌کند util در Webpack 4 که ممکن است برنامه شما از آن استفاده کرده باشد، کار می‌ کرد. می‌توانید همه آن‌ها را با استفاده از بسته‌ای مانند node-polyfill-webpack-plugin مجدداً اضافه کنید یا واردات را به‌صورت تکه‌ای به دنبال این چیت شیت اضافه کنید.

برای خطاهای بار تجزیه کننده Babel eslint مانند Error: Failed to load parser 'babel-eslint' declared in '.eslintrc': Cannot find module 'babel-eslint' ، ممکن است مجبور شوید "parser": "babel-eslint" با "parser": "@babel/eslint-parser" در .eslintrc خود و "@babel/eslint-parser" در package.json خود نصب کنید. این ممکن است ناشی از حرکت babel-eslint به @babel monorepo باشد، برای اطلاعات بیشتر به وضعیت babel-eslint مراجعه کنید.

برخی از وارد کردن‌های نوع فایل که قبلاً با Webpack 4 کار می‌کردند، با Module build failed: UnhandledSchemeError (خطای واقعی چندین صفحه را در ترمینال من انجام داد). راه حل در اینجا اصلاح پیشوندهای فایل هایی است که وارد می کنید، و برای فایل های خارجی که شامل می شوند، ببینید آیا می توانید یک بسته npm برای آن پیدا کنید. برای مثال، یکی از پروژه‌های من استفاده از semantic-ui.min.css را که از اینترنت دانلود شده بود متوقف کرد، و در عوض "semantic-ui-css": "^2.5.0" به package.json خود اضافه کردم. برای اطلاعات بیشتر حتماً این موضوع را در مخزن وب پک بخوانید.

بعد از همه اینها، من توانستم yarn test و yarn build انجام دهم تا موفق شوم، اما yarn start همچنان مشکلات زیادی داشت و من به جای آن به کار CRA v4 روی آوردم. امیدوارم شما بیشتر از من پیش بروید.

خبرکاو