استبدال الوحدة النمطية الساخنة في الإعادة

هذا مثال بسيط على استبدال الوحدة الساخنة (أو HMR) في تطبيق Redux. تمت استضافة كود العرض التوضيحي العامل على GitHub. نحن نقوم فقط بتضمين الإعدادات الأساسية لدعم HMR ، مما يجعلك تسهل تطبيق HMR في تطبيق Redux الخاص بك.

إذا كنت لا تستطيع الانتظار لتطبيق HMR ، فانتقل إلى هذا القسم لإعداد HMR لمشروعك في غضون خمس دقائق!

قم بتشغيل المثال

الحصول على يديك القذرة أولا! قبل تشغيل الأوامر لبدء هذا التطبيق النموذجي ، يرجى التأكد من تثبيت Git و Node.js و Yarn بشكل صحيح على جهازك.

 $ git clone https://github.com/Front-end-io/articles.git $ cd articles && git checkout redux-hmr $ yarn install $ yarn start

ثم قم بزيارة http: // localhost: 3000 / لمعرفة ما إذا كان يعمل.

عند كتابة التعليمات البرمجية الخاصة بك ، يمكن لاستبدال الوحدة النمطية الساخنة تحديث الصفحة دون تحديث كامل. الأهم من ذلك ، يتم الاحتفاظ بحالة إعادة التشغيل بينما يتم تحديث الموارد الأخرى في مكانها.

استبدال الوحدة الساخنة

يعد استبدال الوحدة النمطية الساخنة أحد أكثر الميزات المفيدة التي تقدمها Webpack. يسمح لجميع أنواع الوحدات النمطية ، بما في ذلك ملفات JSON و CSS و JS ، بالتحديث في وقت التشغيل دون الحاجة إلى تحديث كامل.

إليك كيف يعمل داخليًا:

1. يطلب التطبيق من وقت تشغيل HMR للتحقق من وجود تحديثات.
2. يقوم وقت التشغيل بتنزيل التحديثات بشكل غير متزامن وإخطار التطبيق.
3. ثم يطلب التطبيق وقت التشغيل لتطبيق التحديثات.
4. وقت التشغيل يطبق التحديثات بشكل متزامن.

يعزز HMR الإنتاجية عند تطوير تطبيق Redux. Redux عبارة عن حاوية حالة يمكن التنبؤ بها لتطبيقات JavaScript. إنه إطار عمل شائع جدًا يعتمد على React. يعد Redux ، من خلال تعريف المبدأ الأول لـ Redux ، مخزن بيانات مشترك فريد ، تم وصفه من خلال وثائقه بأنه "مصدر واحد للحقيقة". سيتم تحديث مخزن البيانات (كائن JavaScript عادي يتم تحديثه بواسطة reducers ) أثناء عمل المستخدم على التطبيق. من المرجح أن تقوم كل عملية مستخدم ، مثل النقر فوق الزر وتحميل البيانات الخلفية وما إلى ذلك ، بتحديث المتجر عدة مرات. ليس من السهل إصلاح الخلل عندما يحدث الخطأ فقط مع لقطة معينة للحالة.

يسمح لنا HMR بتحديث الصفحة دون إعادة تهيئة المتجر العالمي. أثناء تطوير Redux ، قد نرغب في فحص المتجر بعد سلسلة من العمليات. السيناريو الشائع جدًا هو أن الخطأ يحدث فقط بعد أن نضيف عنصرًا معينًا (ربما معقدًا) إلى المتجر. بدون HMR ، علينا القيام بالخطوات التالية:

1. تعديل التعليمات البرمجية التي من المحتمل أن تسبب الخطأ.
2. قم بتحديث الصفحة ، أضف عنصرًا معينًا إلى المتجر.
3. إذا استمرت الأخطاء ، كرر الخطوة 1.

سيتكرر التكرار أعلاه مرارًا وتكرارًا إذا كان من الصعب العثور على الخطأ. في العالم الحقيقي ، قد يظهر الخطأ فقط بعد المزيد من العمليات. يساعدنا HMR في تجميع الكود المعدل وتطبيقه مع الحفاظ على قيمة المتجر الحالية دون تغيير. لا نحتاج إلى تكرار الخطوة الثانية. فهو يعزز كفاءة التطوير.

الميزة في هذا المثال

نريد الحفاظ على الحد الأدنى من الميزة ، فقط لإثبات قدرة HMR. لذلك في هذا التطبيق ، لا نقوم بتضمين ميزات مشتركة في تطبيق React ، بما في ذلك redux-logger ، و response-router-redux ، و redux-thunk ، و redux-devtools ، وما إلى ذلك. صفحة.

تطبيقنا يحتفظ فقط بقيمة مقابلة في المتجر. لدينا صفحة واحدة فقط تسمى الصفحة الرئيسية ، والتي تعرض قيمة العداد وزرين لزيادة / تقليل قيمة العداد.

للتأكد من أن HMR يعمل ، ما عليك سوى زيادة / تقليل العداد عدة مرات ، ثم تعديل بعض التعليمات البرمجية. على سبيل المثال ، قم بتعديل العنوان " عداد للعداد في المتجر ". ثم سنجد أن:

• لم يتم تحديث الصفحة.
• قيمة العداد المعروضة لم تتغير.
• تم تغيير العنوان إلى عداد في المتجر .

‍ إعداد HMR في خمس دقائق

لإعداد HMR ، اتبع هذه الخطوات.

المكتبات الأساسية

يجب تثبيت هذه المكتبات لدعم HMR:

• رد فعل-hot-loader^4.2.0: تجميع وتحديث تطبيق React في الوقت الحقيقي.
• webpack-dev-server^3.1.4: يقدم تطبيق Webpack. يحدّث المتصفح على التغييرات.

ES6

إذا كنت تستخدم ECMAScript6 (من ليس كذلك ، هذه الأيام؟) ، فأنت بحاجة إلى المزيد من الأدوات لتجميع ES6 في الوقت الفعلي. أولاً ، هذا هو الحد الأدنى من ملف التكوين ES6 .babelrc:

 { "env": { "development": { "presets": [ "react-hmre" ] } } }

لدعم التجميع في الوقت الفعلي ، هذه المكتبة مطلوبة:

• babel-preset-react-hmre^ 1.1.1

Webpack.config.js

نحتاج إلى تكوين HMR في ملف تكوين Webpack webpack.config.js.

أولاً ، قم بتمكين المكون الإضافي HMR في قسم الملحقات:

 "plugins": [ … new webpack.NamedModulesPlugin(), new webpack.HotModuleReplacementPlugin(), ]

يُنشئ المكون الإضافي HMR مانيفست ، ملف JSON يسرد الوحدات المحدثة ، و تحديث ، ملف JSON يحتوي على البيانات التي سيتم تطبيقها. ما يجب ملاحظته هو أن HMR هو خيار يوفره Webpack. تتلقى اللوادر مثل محمل النمط ، الذي ينفذ واجهة HMR ، تحديثًا من خلال HMR ثم يستبدل الرمز القديم بالرمز الجديد.

إذا كنا نستخدم webpack-dev-server ، فسنحتاج إلى تشغيل العلامة الساخنة في قسم devServer:

 "devServer": [ ... hot: true, ]

إعادة تحميل مخفضات الاختزال

بدءًا من الإصدار 2.0.0 من Redux ، لا يتم إعادة تحميل المخفضات بشكل ساخن ضمنيًا لأن إعادة التحميل الساخن الضمني يسبب بعض المشكلات. إذا تمت إعادة تعيين حالة Redux الخاصة بك إلى القيم الأولية عند التحديث السريع ، فحاول تمكين التحديث السريع للمخفضات:

 import { createStore } from 'redux'; import rootReducer from '../reducers/index'; export default function configureStore(initialState) { const store = createStore(rootReducer, initialState); if (module.hot) { // Enable Webpack hot module replacement for reducers module.hot.accept('../reducers', () => { const nextRootReducer = require('../reducers/index'); store.replaceReducer(nextRootReducer); }); } return store; }

إعدادات متقدمة

لمزيد من الإعدادات المتقدمة لـ HMR ، يرجى الرجوع إلى HMR API.

يركض

أخيرًا ، يرجى تشغيل التطبيق باستخدام:

 $ ./node_modules/.bin/webpack-dashboard -- webpack-dev-server

استكشاف الأخطاء وإصلاحها

HMR ببساطة لا تطبق التغييرات

قد تفشل HMR بصمت دون أي تحذيرات. عند تحديث الرمز وحفظه ، لا يتم تحديث الصفحة على الإطلاق. ربما يكون هذا بسبب أن نظامك لا يسمح لك بمشاهدة العديد من تغييرات الملفات.

على Ubuntu ، يمكنك تشغيل sysctl -a | grep inotify sysctl -a | grep inotify لعرض قيمة user.max_inotify_watches الحالية. حاول زيادة هذا الرقم عن طريق تشغيل: sudo sysctl fs.inotify.max_user_watches=524288 . بدلاً من ذلك ، قم بإلحاق سطر جديد fs.inotify.max_user_watches=524288 لملف sudo vim /etc/sysctl.conf ثم قم بتشغيل sudo sysctl -p /etc/sysctl.conf لتطبيق التغيير.