ماهو npm وكيف يعمل ؟

الصورة الرمزية لـ عبد الله نجاوي
what is npm

قد تكون قد سمعت أو قرأت عن npm وهي إختصار ل “Node.js package manager” من خلال الإسم أو الوصف أي “package manager” أو مدير حزم , هنا يمكننا أن نفهم بسهولة أن npm مخصصة للتعامل مع البرمجيات وإدارتها وهنا نتحدث عن التنصيب أو التحديث والحذف وغيرها من العمليات الأساسية , الهدف من تطوير  npm هو مساعدة المطورين على التعامل مع برمجيات جافا سكريبت التي تعمل في بيئة Node.js .

ماهي Node.js ؟

ببساطة Node.js هي بيئة عمل تمكن من تنفيذ لغة جافا سكريبت , ميزتها أنك تستطيع تنصيبها في أي نظام تشغيل , مثل أنظمة لينكس والتي يمكنك تنصيب نود فيها والعمل عليها ك BackEnd , أي أنك تستطيع من خلال Node.js أن تستخدم جافا سكريبت كلغة من جهة الخادم , وليس من جهة العميل أي في المتصفح فقط كما في السابق.

الفضل في هذا يرجع إلى محرك لغة JavaScript وهو V8 باعتباره محرك يستخدم داخل متصفح جوجل كروم , وبعد أن قامت جوجل بجعل محرك V8 مفتوح المصدر تم التعديل عليه لجعله نواة ل بيئة متكاملة لتشغيل لغة جافا سكريبت بشكل مستقل ومنفصل عن المتصفح , هنا أصبح بالإمكان إستخدام JavaScript في مجالات كثيرة وليس لتطوير الواقع فقط, طبعا تجدر الإشارة إلى أن برمجية نود نفسها غير مكتوبة بلغة جافا سكريبت هي فقط مترجمة للغة , في المقابل هي مكتوبة بلغة C++ وهذا من الأمور التي تجعل نود خيار جيد باعتبار لغة C++ لغة قوية وسريعة , لهذا الكثير من الشركات الكبيرة تستخدم Node.js في مواقعها , ويمكنك التعرف على المزيد من خلال المقالة التالية تعلم Node.js مع هذه الدورات .

أهمية npm

يأتي Node.js package manager بشكل إفتراضي مع Node.js لهذا يكفي أن تقوم بتنصيب نود من الموقع الرسمي , بعدها يمكنك الشروع في إدارة الحزم باستخدام npm وهذا الأمر طبعا يتم عن طريق سطر الأوامر , أي أنه يجب أن يكون لديك دراية بسيطة بسطر الأوامر , ولا يهم النظام الذي تستخدم أكان ويندوز أو ماك وطبعا لينكس , فالأوامر الخاصة ب npm هي نفسها .

بعدها الدخول للموقع الرسمي  Node.js قم بتحميل النسخة التي تناسب نظام التشغيل لديك , في حالة كنت تستخدم ويندوز قم بتحميل برنامج التنصيب الذي سيقوم بتنصيب  Node.js في حاسوبك , ونفس الأمر بالنسبة لمن يملك حاسوب ماك , أما بالنسبة لمن يستخدم لينكس وتحديدا أوبنتو يمكنه ببساطة استخدام الأمر التالي , وهو أمر بسيط بحيث ” sudo ” إختصار ل Super User Do وهو أمر مهم من أجل إعطاء الصلاحيات لتمرير بعض الأوامر , أيضا الأمر “apt” وهو أمر مخصص لإدارة الحزم في أبنتو , وأخيرا الأمر “update” وهو مخصص لتحديث الحزم , وهو أمر روتيني ينصح به قبل تحديث الحزم أو تنصيب برامج جديدة

sudo apt update

الأن سنقوم بتنصيب Node.js عن طريق الأمر التالي :

curl -sL https://deb.nodesource.com/setup_12.x | sudo -E bash -

بعدها نضيف الأمر التالي :

sudo apt-get install -y nodejs

في حالة كنت تستخدم ويندوز أو ماك وبعد انتهاء عملية التنصيب قم الآن بفتح الطرفية “Terminal” وقم بكتابة الأمر التالي :

node -v

هنا من المفترض أن يظهر رقم الإصدار الخاص ب  Node.js وهذا يعني أن عملية التنصيب تمت بنجاح, أيضا قم بكتابة الأمر التالي :

npm -v

في حالة ظهور رقم الإصدار هنا أيضا يعني أن npm قد تم تنصيبه بنجاح.

إستخدام بسيط ل npm

الآن قم بإنشاء مجلد وأعطه الإسم الذي تريد مثلا “mywebsite” , الخطوة التالية هي فتح برنامج سطر الأوامر أو Terminal والتنقل إلى المجلد “mywebsite” عن طريق الأمر “cd” وهو اختصار ل “Change Directory” مثال

cd mywebsite

لابأس ن القيام ببحث بسيط لكيفية إستخدام الطرفية أو CMD في ويندوز في حالة واجهت صعوبات .

تنصيب Bootstrap باستخدام npm

من البرمجيات التي يمكنك إدارتها باستخدام مدير الحزم npm هي إطار العمل Bootstrap للقيام بهذا يمكنك استخدام الأمر التالي :

npm install bootstrap

قم الأن بإنشاء ملف باسم index.html داخل مجلد mywebsite بالتالي سيكون ترتيب الملفات التي سنحصل عليها على هذا الشكل

npm bootstrap tree

والملفات التي سنحتاجها حاليا من أجل التجربة هي ملف index.html و bootstrap.min.css و bootstrap.min.js الذي سنقوم به الآن هو فتح ملف  index.html ثم إنشاء هيكل صفحة HTML الأساسي والربط مع بوتستراب والنتيجة ستكون على هذا الشكل :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>صفحة بوتستراب</title>

    <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css"

</head>
<body>
    
    <h1>تم تنصيب بوتستراب بنجاح</h1>

    <script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
</body>
</html>

الأن وحتى نتمكن من معاينة التعديلات سنقوم بتنصيب حزمة جديدة عن طريق npm بهذا الشكل :

npm install live-server -g

بعد الإنتهاء من عملية التنصيب ,وأنت داخل مجلد mywebsite من خلال الطرفية أو  قم Terminal بكتابة الأمر التالي

live-server

من المفترض الأن أن تفتح صفحة HTML التي قمنا بربطها مع بوتستراب على هذا الشكل :

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