كيفية الحصول على إعادة التشغيل التلقائي ودعم نقطة توقف مع Typescript و Node

إنشاء تجربة كتابة رائعة مع العقدة

عندما حاولت لأول مرة استخدام typescript في مشروع NodeJs ، كافحت للعثور على دليل جيد يشرح كيفية الحصول على الإعداد. لذلك قررت أن أكتب واحدة بنفسي. إنه مغرور للغاية ، لكنني وجدت أن هذا الأمر رائع بالنسبة لي. آمل أن يكون ذلك لشخص آخر أيضًا.

خلال الأشهر الـ 12 الماضية ، قمت بإعداد عدد لا يحصى من مشاريع Flow و Typescript. كنت أجرب العديد من المحررين وأطر الاختبار وأدوات البناء. لقد بدأت في البداية باستخدام boilerplates ، لكنني وجدت مؤخرًا أنه من الأسهل إنشاء الإعداد من البداية ، مع بعض الاستثناءات. فائدة القيام بذلك ، هي أنني أفهم كل جزء من المشروع. ويمكن أن تضيف إليها على أساس الحاجة.

في هذا الدليل ، سأوضح لك كيفية إعداد إعداد أساسي مع typescript و node. ثم كيفية الحصول على إعداد فعال للغاية مع دعم نقطة توقف (في VSCode) ، واختبارات الوحدة وإعادة التشغيل التلقائي. إذا كنت على دراية بالخطوات الأساسية ، يمكنك تخطي اليمين إلى الخطوتين 3 و 4 حيث يتم تقديم نقاط إعادة التحميل التلقائي ونقاط التوقف

1: الإعداد الأساسي

لنبدأ في دليل فارغ. في حالتي ، بدأت في مجلد مشروع نموذج باسم typescript-node. في هذه الخطوة ، سننشئ إعدادًا بسيطًا لكتابة خادم سريع في نموذج. سنبدأ بإنشاء الملفات التالية

$ npm init
$ mkdir src && touch src / server.ts
$ tsc -

والتي يجب أن تعطيك الهيكل التالي

- src
   server.ts
package.json
tsconfig.json

بعد ذلك ، سنضيف التبعيات المطلوبة إلى المشروع. يمكنك استخدام إما الغزل أو npm لهذه الخطوة (سألتزم الغزل في الأمثلة الخاصة بي).

الغزل إضافة صريحة
غزل إضافة - ديف typescript @ types / express

بعد ذلك سنضيف خادمًا بسيطًا للغاية

وأضف التالي إلى قسم البرامج النصية npm في package.json:

واستبدل محتوى tsconfig.json الخاص بك بما يلي:

هذا هو. يجب أن تكون قادرًا الآن على تشغيل npm startin في مطرافك ورؤية الخادم الخاص بك يعمل:

2: إضافة اختبارات الوحدة مع Jest

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

منذ أن تعرفت على Jest ، لقد وقعت في غرام كل من السرعة وسهولة الاستخدام والأهم من ذلك في هذه الحالة: كم هو سهل الاندماج مع الخط النصي. للبدء ، يتيح إضافة التبعيات التالية:

إضافة الغزل --ds ts-jest jest @ types / jest

وأضف ما يلي إلى package.json (أضفت نصين إضافيين إلى قسم البرامج النصية)

بعد ذلك ، سنضيف dummy.test.ts إلى دليل src ، للتحقق من أن عداء الاختبار يعمل كما هو متوقع.

نحن جميعا على استعداد. يمكنك الآن تشغيل اختبار npm لتشغيل مجموعة الاختبار مرة واحدة أو اختبار تشغيل npm: شاهد لتشغيلها بشكل مستمر:

3: إضافة إعادة التشغيل التلقائي للخادم عندما يتغير الرمز

إضافة أنيقة أخرى عند تطوير العقدة ، هي إعادة تشغيل الخادم في كل مرة تقوم فيها بتغيير التعليمات البرمجية الخاصة بك. ومع ذلك ، قد يكون إجراء هذا العمل بشكل صحيح مع الآلة الكاتبة أمرًا صعبًا بعض الشيء ، إذا لم تجربه من قبل. لكنه في الواقع بسيط حقًا مع العقدة والعقدة. لذلك دعونا نضيف هذه:

إضافة الغزل --dod nodemon ts- العقدة

وأحب الاحتفاظ بتكوين nodemon الخاص بي في nodemon.json seperat لجعل نصوص npm أسهل في القراءة. لذلك قم بإنشاء nodemon.json في جذر المشروع بالمحتوى التالي:

سنقوم بتعديل البرنامج النصي لبدء التشغيل الخاص بنا لاستخدام ts-node (وهذا يضمن عدم تعطل nodemon عندما لا يتم تجميع typescript) وإضافة برنامج نصي dev ، يعمل على nodemon:

يمكنك الآن تشغيل dev تشغيل npm وإعادة تشغيل الخادم تلقائيًا في كل مرة تقوم فيها بإجراء تغيير:

4: إضافة دعم نقاط التوقف في Visual Studio Code

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

الخطوة الأولى هي تشغيل العقدة مع علامة التفتيش. (يجب أن يكون مدعومًا من العقدة 6.3 وما فوق. لكنني قمت باختبارها فقط باستخدام العقدة 7.9.0). لذلك دعونا نغير نص البدء الخاص بنا إلى ما يلي:

بعد ذلك ، سنقوم بإضافة ما يلي إلى ملف vscode launch.json في مشروعنا. يمكنك إما إنشاء vscode أو إضافته يدويًا إلى دليل .vscode في جذر مشروعك. يمكنك قراءة المزيد حول تصحيح أخطاء vscode هنا.

بعد ذلك ، سنضيف نقطة نهاية افتراضية لخادمنا لاختبار أن نقاط التوقف تعمل كما هو متوقع.

ونحن سعداء للذهاب. ابدأ تشغيل الخادم باستخدام npm run dev وابدأ في تصحيح الأخطاء عن طريق الضغط على F5 أو الانتقال إلى علامة التبويب debug في vscode. حاول إضافة نقطة توقف عند السطر 8 في العينة أعلاه واضغط على المضيف المحلي: 8000. يجب أن تشاهد الآن توقف vscode عند نقطة توقفك. يمكّنك هذا من فحص كل المتغيرات الموجودة حاليًا في النطاق وتعديلها بعلامة تبويب تصحيح vscode.

تمكنك علامة التبويب تصحيح في الأسفل من معالجة المتغيرات في النطاق. أثناء التمرير فوق المتغيرات الموجودة في النطاق ، يمكنك من فحصها باستخدام القائمة المنسدلة أعلاه.

هذا هو. يمكنك الآن وضع رمز بعيدًا ، مع تمكين خادم إعادة التشغيل التلقائي وتصحيح الأخطاء عن بُعد في vscode. لا تحتاج حتى إلى إعادة تشغيل العملية في vscode - يتم إعادة ربطها تلقائيًا. تحذير واحد على الرغم من أنه يزيل نقاط التوقف الخاصة بك في كل إعادة تشغيل الخادم. إذا كنت تعرف كيفية حل ذلك ، فالرجاء إعلامي في التعليقات أدناه! يمكنك العثور على رمز هذا الدليل في هذا الريبو: https://github.com/Aleksion/typescript-node-walkthrough

هل وجدت طريقة أفضل للعمل مع typescript و العقدة؟ أو فاتني أي شيء حرج في تجول بلدي؟ اسمحوا لي أن أعرف هنا أو على تويتر.
أحببت هذا؟ من فضلك لا تتردد في ذلك ومشاركتها مع أصدقائك!