كيفية إعداد خادم اكسبرس شبيبة مع Nodemon وبابل

(مرحبًا بكم ، يمكن العثور على نسخة محدثة من هذا البرنامج التعليمي هنا)

لقد عدت مؤخرًا إلى تطبيقات الويب المكتوبة بنشاط باستخدام React JS وأحد الأشياء التي وجدتها مثيرة للاهتمام حقًّا بعد سلسلة من عامين من Javascript هي كيف كان ES6 في تبسيط الأشياء.

بعد مرور أسبوعين على استخدام بناء جملة ES6 في React - كنت بحاجة إلى إعداد خادم صغير باستخدام Express JS و MongoDB ولكن معظم البرامج التعليمية التي قرأتها لا تزال تستخدم صيغة ES5 ولم أستخدمها. لقد أجريت بحثي الخاص ووجدت طريقة أسهل لإعداد مشروع خادم Express JS لاستخدام Babel لبناء جملة ES6 و Nodemon للتحميل التلقائي - وهو ما سأشاركه معك.

الآن إذا كنت جديدًا على Javascript ES6 ، أشجعك على مراجعة المقالة أدناه لمعرفة الفرق بينها وبين ES5.

جميع اشتعلت؟ عظيم ، دعونا نفعل هذا.

إعداد خادم Express

أول شيء هو أننا سنقوم بإنشاء مجلد يسمى express_server وتهيئة npm باستخدام الأكواد التالية للأمر.

mkdir express_server
اكسبريس سيرفر
npm init

يؤدي تشغيل npm init إلى تشغيل معالج cli والذي سيطرح عليك عدة أسئلة. بعد كل هذه الأسئلة ، يجب أن يكون لديك ملف package.json تم إنشاؤه يبدو كهذا.

{
"name": "express_server" ،
"الإصدار": "1.0.0" ،
"وصف": ""،
{
  "الرئيسي": "index.js" ،
  "نصوص": {
    "test": "echo \" خطأ: لم يتم تحديد اختبار \ "&& exit 1"
  }،
  "مؤلف": ""،
  "الترخيص": "مركز الدراسات الدولي"
}

الآن وبعد أن أصبح لدينا ملف package.json ، فلنبدأ في تثبيت الحزم اللازمة لتنشيط خادم Express js الخاص بنا. الحزمة الأولى التي سنقوم بتثبيتها هي Express JS نفسها.

npm تثبيت صريح

بعد تثبيت Express JS ، قم بإنشاء ملف js يسمى index.js باستخدام command touch index.js وأضف الأسطر التالية:

فار اكسبريس = مطلوب ('اكسبريس')
فار التطبيق = اكسبريس ()
app.listen (3400 ، وظيفة ()
{console.log (`خادم يستمع على المنفذ 3400`)})
module.exports = التطبيق ؛

باستخدام هذه الأسطر القليلة ، يمكنك تشغيل الخادم باستخدام هذا الأمر في الجهاز الطرفي.

index.js العقدة

سترى الخادم يستمع على المنفذ 3400 في الجهاز.

دعونا نكسر الكود لاستخدام صيغة ES6

حتى الآن لا نزال نستخدم بناء جملة ES5 ، لذلك دعونا نعد مشروعنا لاستخدام الأشياء الحلوة التي توفرها ES6. لهذا سنقوم بتثبيت حزم من بابل ذات الصلة.

تثبيت npm babel-cli babel-preset-env babel-loader babel-core --save-dev

قم بالترتيب لضمان قيامنا بأي وقت بإجراء أي تغييرات على أي من الملفات في مشروعنا وإعادة تشغيل الخادم ليعكس تلك التغييرات تلقائيًا - سنقوم بتثبيت nodemon باستخدام الأمر التالي.

npm تثبيت nodemon - حفظ ديف

يتم استخدام علامة حفظ حفظ العلم لأن هذه الحزم مطلوبة فقط في بيئة التطوير وليست ضرورية في بيئة الإنتاج.

بعد التثبيت ، افتح package.json وتعديل البرامج النصية بإضافة مفتاح البدء كما هو موضح أدناه. سيُعلم هذا العقدة بمعالجة بناء جملة ES6 باستخدام Babel و nodemon لمشاهدة أي تغييرات في ملف server.js وجميع وارداته. يجب أن تبدو الحزمة الخاصة بك.

{
  "اسم الخادم"،
  "الإصدار": "1.0.0" ،
  "وصف": ""،
  "الرئيسي": "index.js" ،
  "نصوص": {
    "start": "nodemon index.js --exec babel-node - presets babel-preset-env"،
    "test": "echo \" خطأ: لم يتم تحديد اختبار \ "&& exit 1"
  }،
  "مؤلف": ""،
  "الترخيص": "مركز الدراسات الدولي" ،
  "التبعيات": {
    "تعبير": "^ 4.16.3"
  }،
  "devDependencies": {
    "babel-cli": "^ 6.26.0" ،
    "بابل كور": "^ 6.26.3" ،
    "بابل لودر": "^ 8.0.2" ،
    "babel-preset-env": "^ 1.7.0" ،
    "nodemon": "^ 1.18.4"
  }
}

بعد هذه التغييرات ، يمكنك الآن فتح index.js ورفض الرمز لاستخدام بناء جملة ES6 مثل وظائف الاستيراد والسهم.

استيراد صريح من "صريح"
التطبيق const = اكسبريس ()
app.listen (3600، () =>
console.log (`خادم يستمع على المنفذ 3400`))
module.exports = التطبيق ؛

عند الانتهاء ، أوقف تشغيل الخادم إذا كان يعمل باستخدام ctrl + z على windows أو linux وأعد تشغيله باستخدام الأمر npm start بدلاً من الأمر index.js السابق. يجب أن تشاهد الرسالة:

إذا قمت بإجراء أي تغييرات على الملف ، فستعيد nodemon الخادم تلقائيًا لك.

حسنا هذا هو عليه. في هذه المرحلة ، يمكنك تثبيت أي حزم تريد إكمال خادم Express JS الخاص بك وستظل قادرًا على استخدام كل الأشياء الجديدة التي توفرها ES6 - للحصول على خلاصة عن تلك التي يمكنك قراءة مقالتها في Olivier J.M أدناه.

هذا كل شيء مني ، يمكنك الخروج من المشروع هنا:

شكرا للقراءة والترميز سعيد!

(قمت بتحديث معظم التكوينات لذلك اتبع هذا البرنامج التعليمي بدلاً من ذلك)