npm چیست؟ چرا باید از Package Manager ها در پروژه خود استفاده کنیم؟

غیر ممکن است برای مدتی برنامه نویسی کرده باشید اما اسم و واژه پکیج منیجر npm به گوشتان نخورده باشد. تا قبل از سال 2009 کدهای جاوا اسکریپت js فقط در مرورگر ها اجرا می شد. مرورگر ها با موتور و هسته خود کد های جاوا اسکرپیتی را به زبان قابل فهم ماشین تبدیل می کنند.

در سال 2009 شخصی به نام Dahl Ryan ایده ای را پیاده سازی می کند که در آن کد های js خارج از مرورگر اجرا شوند. او با استفاده از کد های ++C  توانست هسته مرکزی مرورگر کروم را خارج از مرورگر اجرا کند. این کار باعث به وجود آمدن NodeJs شد و اجرای کد های Js دیگر نیازی به مرورگر ها نداشتند. امروزه با استفاده از node js می‌توانیم کدهای جاوااسکریپت را خارج از مرورگر و برای کارهایی مانند ارتباط با دیتابیس و مدیریت فایل ها و انجام درخواست ها استفاده کنیم.

Package Manager چیست؟ چرا باید از آن استفاده کنیم؟

حتما تا به الان ماژول ها، فریمورک ها و حتی کتابخانه های زیادی را در پروژه های خود استفاده کرده اید. برای اینکار مجبور بوده اید فایل ها css و js زیادی را به روش های مختلف به پروژه خود اضافه کنید. اگر تعداد این وابستگی ها در پروژه ها زیاد شود مدیریت آن ها سخت خواهد بود. Package Manager ابزاری است که توسعه‌دهندگان برای یافتن، دانلود، نصب، پیکربندی، ارتقاء و حذف پکیج‌های مورد نیاز خود به طور خودکار از آن استفاده می‌کنند.

اگر Package Manager وجود نداشت با چه مشکلاتی روبرو بودیم:

• پیدا کردن پکیج ها
• بررسی پکیج ها برای نداشتن فایل های مخرب
• دانلود پکیج ها یا کتابخانه ها
• نصب آن ها در محل مناسب
• پیگیری آپدیت ها و بروزرسانی آن ها در صورت لزوم
• حذف پکیج هایی که مورد استفاده نیستند برای بهبود پرفورمنس پروژه

البته باید این موضوع را نیز در نظر بگیریم که بعضی از این پکیج ها فقط در سمت توسعه مورد استفاده قرار میگیرند. درنتیجه نیازی نیست که این پکیج ها در سمت فرانت برای کاربر لود شود. در واقع مدیریت این پکیج ها کار سخت و خسته کننده ای است. پس چه بهتر است از Package Manager هایی مانند: NPM ،Yarn، Bower و … استفاده کنیم تا این فرایند طولانی و تکراری و خسته کننده به صورت اتوماتیک انجام شود.

Package Registry چیست؟ چه تفاوتی با Package Manager دارد؟

اگر Package Manager را ابزاری برای دانلود، نصب، ارتقاء و … پکیج ها در نظر بگیریم، Package Registry یک پایگاه داده برای ذخیره‌سازی هزاران پکیج (کتابخانه‌ها، پلاگین‌ها، چارچوب‌ها یا ابزارها) است. به عبارت دیگر، مکانی است که پکیج‌ها در آن منتشر و نصب می‌شوند.

دو ابزار کاربردی در مدیریت پکیج ها NPM (Node Package Manager) و Yarn (Yet Another Resource Negotiator) هستند. در این مقاله قصد نداریم به مزایا و معایب هر کدام از آن ها بپردازیم. چون که بهترین Package Manager، همانی است که بهترین کار را برای ما انجام می دهد. از کاربردی ترین و معروف ترین Package Registry هم می توان NPM Registry و GitHub Packages اشاره کرد.

در این مقاله از تیک4 قصد داریم npm package manager را به صورت مختصر معرفی کرده و دستورات کاربردی آن را مورد بررسی قرار دهیم.

npm چیست؟

npm یا همان (Node Package Manager) یک کتابخانه‌ی بزرگ و یک نصاب (Package Manager) به حساب می‌آید. این کتابخانه Open source و رایگان است و نرم افزار مدیریت بسته های Node.js می باشد.

موارد کاربرد npm

• افزودن پکیج های مختلف به پروژه
• اجرا کردن پکیج ها بدون دانلود با استفاده از اجرای دستور در (CLI (command line
• بروزرسانی آسان پکیج های استفاده شده
• اشتراک گذاری کدها با سایر کاربران npm
• کنترل آسان ورژن پروژه

چگونه Node Package Manager (NPM) را نصب کنیم؟

برای اجرای کدهای NPM، در ابتدای کار نیاز به نصب Node دارید. برای این کار به سایت nodejs.org مراجعه کنید. مطابق عکس با کلیک بر روی لینک مشخص شده آخرین نسخه LTS این نرم افزار را دانلود کرده و نصب کنید. تمام شد ! با نصب این نرم افزار NPM هم به صورت خودکار برای شما نصب می شود و نیازی به نصب ماژول و نرم افزار دیگری ندارید.

شما برای اجرای دستورات NPM، باید از طریق محیط cmd سیستم عامل خود، دستورات مربوطه را اجرا کنید. همچنین شما میتوانید این کار را برای هر پروژه خود از طریق Terminal ویرایشگر کد های خود مانند VsCode انجام دهید. پس از نصب نرم افزار Node برای اطمینان از نصب npm میتوانید دستور زیر را در cmd خود اجرا کنید:

npm -v

منظور از علامت -vدر دستور بالا مخفف --veisionاست.

کد های ارتقاء و بروزرسانی NPM

پس از نصب NPM هر زمانی که نیاز به ارتقاء و بروزرسانی آن داشتید می توانید برای این کار از دستور زیر استفاده کنید:

npm install npm@latest -g

دستور نصب و دانلود پکیج ها در پکیج منیجر npm

برای نصب پکیجی جدید می توانید از کد های زیر استفاده کنید. برای مثال میخواهیم پکیج محبوب Bootstrap را بر روی پروژه خود نصب کنیم.

npm i bootstrap

شاید با دیدن این کد سوالی ذهن شما را مشغول کرده که این کد ها را از کجا پیدا کنیم و چطور بفهمیم هر پکیج چه نامی دارد. جواب این سوال خیلی ساده است! برای نصب پکیج های مختلف کافیست وارد یکی از Package Registry که بالا معرفی شد، شوید و نام پکیج مورد نظر خود را جستجو کنید. از این طریق میتوانید اطلاعات زیادی مانند: زمان انتشار آخرین نسخه، پکیج هایی که در همان پکیج برای شما نصب می شوند و … را مشاهده کنید.

یا میتوانید راه ساده تری را انتخاب کنید و اسم پکیج مورد نظر را به همراه واژه npm در گوگل سرچ کرده و این سایت ها را در نتایج اول و یا دوم مشاهده کنید. همچنین می توانید با مراجعه به سایت خود این پکیج ها راهنمای نصب از طریق پکیج منیجر npm را نیز دنبال کنید.

پکیج های npm در کجا ذخیره می شوند؟

پکیج ها در npm به دو صورت محلی و سراسری در سیستم ما دانلود و نصب می شوند. در روش محلی، شما میتوانید آن پکیج را فقط در پروژه خود، استفاده کنید. اما در نصب پکیج ها به صروت سراسری، شما می توانید در هر پروژه ای که نیاز دارید و هر جای سیستم خود که آن را ایجاد کرده اید از آن استفاده کنید. در هر دو حالت نصب، فایلی ایجاد می شود به نام package.json که در آن نام این این پکیج ها و مشخصات آن ها ذخیره می شوند.

این فایل زمانی کاربرد دارد که می خواهید پروژه خود را به اشتراک بگذارید. یعنی در زمان انتقال پروژه دیگر نیازی نیست تمام پکیج ها و کتابخانه ها را به همراه پروژه خود منتقل کنید. فقط کافیست این فایل که به صورت JSON اطلاعات را در خود ذخیره میکند در دایرکتوری پروژه شما باشد تا شخصی که از کد های شما استفاده میکند با اعمال دستور npm installبتواند تمام وابستگی های کد های شما را در سیستم خود نصب کند.

برای نصب یک پکیج به صورت محلی، مراحل زیر را طی می‌کنیم:

• از خط فرمان به دایرکتوری root پروژه خود می‌رویم. و یا اینکه در دایرکتوری پروژه Terminal ویرایشگر کد را باز می کنیم.
• از طریق دستورات نصب در npm، پکیج مورد نظر دانلود و نصب می کنیم. این دستورات را ادامه معرفی می کنیم.

دستور نصب محلی در npm

npm install package-name --save

در دستور بالا --saveبه معنی این است که این پکیج به گونه ای نصب می شود که جزو وابستگی های آن پروژه باشد. یا اینکه در فایل package.json، این پکیج (package-name) به عنوان وابستگی های این پروژه شناخته شود. این کدها که بعد از دستورات مربوط به پکیج منیجر npm نوشته می شوند، به اصطلاح پرچم یا (Flag) می گویند.

یکی دیگر از Flag های پر کابرد در دستورات NPM، دستور --save-devاست که با استفاده از آن می توانیم پکیج را برای اهداف توسعه و تست استفاده نماییم.

اگر بخواهیم یک نسخه مشخص از یک پیکج را نصب کنیم در چنین حالتی، یک @[version-number]بعد از نام پکیج اضافه می‌کنیم. برای درک بهتر به مثال زیر توجه کنید:

npm install package-name@4.14.1 --save

دستورات بالا باعث می‌شود تا NPM سه مورد را در دایرکتوری root پروژه ما دانلود کند: یک پوشه node_modules، یک فایل package.json و یک فایل package-lock.json. در ادامه به شکل مفصل درباره این موارد صحبت خواهیم کرد.

دستور نصب محلی در npm

برای نصب سراسری پکیج ها دستورات خاص و ویژه ای وجود ندارد. کافیست در انتهای دستورات خود پرچم و یا همان Flag مربوط به پکیج های سراسری را استفاده نماییید. به مثال زیر توجه کنید:

npm install package-name -g

در واقع این همان دستور نصب به صورت محلی است که کد -gبه انتهای آن افزوده شده است.

تفاوت های نصب محلی و سراسری پکیج های NPM

همانطور که در بالا گفتیم نصب پکیج ها و لایبرری ها در پکیج منیجر npm به دو صورت محلی و سراسری امکان پذیر است. اما این دو روش تفاوت هایی با هم دارند که در ادامه چند مورد از آن ها را بررسی می کنیم.

1- محل نصب :

پکیج محلی در root و یا همان دایرکتوری مربوط به پروژه ما نصب می شود. یعنی فایل های node_modules، package.json و package-lock.json را میتوانیم در فولدر مربوط به پروژه پیدا کنیم. اما در روش نصب پکیج های NPM به صورت سراسری، این پکیج ها در مکانی واحد که بسته به پیکربندی سیستم ها متفاوت است، نصب می شوند.

2- نسخه های پکیج :

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

3- به روزرسانی ها :

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

چه زمانی باید پکیج های خود را به صورت سراسری نصب کنیم؟

بهتر است آن پکیج هایی که برای اجرای خطوط فرمان مورد استفاده قرار می گیرند را به صورت سراسری نصب کنیم. به خصوص زمانی که آن های قابلیت استفاده مجدد در دیگر پروژه های ما را داشته باشند. پکیج هایی نیز هستند که آن ها را با دستورات require()و یا importکه مربوط به نسخه های جدید جاوا اسکریپت (ES6) است، به پروژه اضافه می شوند. بهتر است این پکیج ها به صورت مجلی نصب شوند.

NPM ،React Native CLI ،Gatsby CLI ،Grunt CLI و Vue CLI نمونه‌های شناخته شده‌ای از پکیج‌های سراسری هستند. همینطور Webpack ،Lodash ،Jest و MomentJS نیز از نمونه‌های رایج پکیج‌های محلی به‌شمار می‌روند.

البته باید به نکات زیر توجه داشته باشیم:

• ما می‌توانیم پکیج‌هایی را که می‌خواهیم از آن‌ها هم در خط فرمان و هم در پروژه خود استفاده کنیم، هم به شکل محلی و هم سراسری نصب کنیم. نمونه‌هایی از این پکیج‌ها ExpressJS و CoffeeScript هستند.
• Package Manager ما یک پکیج نصب شده را اجرا نمی‌کند. NPM فقط پکیج‌ها را در دایرکتوری node_modules نصب می‌کنند. و اگر دستور --saveرا مشخص کرده باشیم، manager جزئیات مربوط به پکیج را به فایل json اضافه خواهد کرد.
• برای اجرا کردن هر پکیج اجرایی، باید خودمان به صراحت این کار را انجام دهیم. در بخش بعدی به چگونگی انجام آن خواهیم پرداخت.

node_modules چیست؟

در بالاتر هم اشاره شد که بعد از نصب پکیج های فایل هایی در root پروژه اضافه می شوند. یکی از آن های فولدر و یا پوشه node_modules است که در آن محتویات پکیج ها قرار می گیرند.

فایل package.json چیست؟

فایل package.json یک سند JSON است که Package Manager ها (مانند پکیج منیجر npm ) برای ذخیره‌سازی اطلاعات مربوط به یک پروژه خاص از آن استفاده می‌کنند. به عبارت دیگر، package.json فایل متادیتا یک پروژه است. وجود این فایل در پروژه مزایایی دارد که در ادامه لیست شده است.

• با استفاده از این فایل می توانیم پروژه های خود را در NPM registry منتشر کنیم.
• مدیرت و نصب پکیج های پروژه ما برای دیگران آسانتر می شود.
• به NPM کمک می کند تا وابستگی های یک ماژول را راحت تر مدیریت کند.
• پروژه ما را قابل اشتراک گذاری با دیگر توسعه دهندگان می کند.

فیلد های package.json

همانطور که در مزایای فایل package.json بیان کردیم، این فایل باعث می شود تا پروژه ما برای کاربران نهایی قابل استفاده باشد. package.json دارای فیلد ها و عنوان های مختلفی است تا به کمک آن ها بتوانیم پکیج های استفاده شده در پروژه را راحت تر مدیریت کنیم. به عنوان مثال میخواهیم پروژه خود را در یکی از NPM registry های موجود منتشر کنیم. دو فیلد مهم و اجباری برای انتشار، “name” و “version” هستند. و یا اگر بخواهیم پروژه خود را با برنامه نویس دیگری به اشتراک بگذاریم هیچ فیلدی اجباری نخواهد بود. حتی فیلد های “name” و “version”. در ادامه نمونه از این فایل را مشاهده می کنید که هر کدام از فیلد های آن را معرفی می کنیم.

{
  "name": "my_package",
  "description": "A brief description about this package (project)",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "test": "jest",
    "dev": "webpack --mode development",
    "build": "webpack --mode production",
    "predeploy": "npm run build",
    "deploy": "gh-pages -d build" 
  },
  "dependencies": {
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^13.3.0",
     "@testing-library/user-event": "^13.5.0",
     "axios": "^1.2.0",
     "react": "^18.1.0",
     "react-dom": "^18.1.0",
     "react-icons": "^4.4.0",
     "react-router-dom": "^6.4.3",
     "react-scripts": "5.0.1",
     "sass": "^1.56.1",
     "sweetalert2": "^11.6.14",
     "sweetalert2-react-content": "^5.0.7",
     "web-vitals": "^2.1.4"
  },
  "devDependencies": {
     "@tailwindcss/forms": "^0.5.3",
     "autoprefixer": "^10.4.13",
     "postcss": "^8.4.19",
     "tailwindcss": "^3.2.4"
  },
  "keywords": [
     "drag",
     "drop",
     "drag and drop",
     "dragndrop",
     "draggable" 
  ],
  "author": {
     "name": "Oluwatobi Sofela",
     "email": "oluwatobiss@codesweetly.com",
     "url": "https://www.codesweetly.com"
  },
  "main": "./src/index.js",
  "homepage": "https://github.com/monatheoctocat/my_package"
}

“name” :

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

• از حروف کوچک تشکیل شده باشد.
• تعداد کاراکتر های آن باید کمتر از 215 باشد.
• کلمات باید با underline و یا خط تیره از هم جدا شوند.

به عنوان مثال در فایل بالا نام پکیج خود را “my_package” گذاشته ایم. البته همانطور که گفته شد این فیلد در صورتی که بخواهیم در NPM Register، پکیج خود را منتشر کنیم، ضروری خواهد بود. در غیر این صورت نیازی نیست این فیلد در فایل ما قرار داشته باشد.

“description” :

به جهت معرفی پروژه خود، توضیحاتی را در این فیلد قرار می دهیم. NPM توصیه کرده است که برای انتشار پکیج، حتما ویژگی “description” را وارد کنید تا پکیج ما راحت‌تر در وب سایت NPM پیدا شود. چون این توضیحات یکی از مواردی است که هنگام اجرای فرمان جستجو در npm نشان داده می‌شود.

“version” :

هر پروژه و یا پکیج که می خواهید روی آن کار کنید، دارای ورژن و یا نام نسخه است. این نام نسخه برای انتشار در github ضروری است.

“private” :

این ویژگی باعث می شود تا پروژه ما در npm registery منتشر نشود. در مثال بالا این مقدار برابر با true است که یعنی package manger ها حق انتشار این پروژه را نخواهند داشت.

“scripts” دز فایل package.json :

این فیلد شامل دستوراتی است که میخواهیم در پروژه اجرا شوند. اما به جای اینکه دستورات طولانی را برای کاربران آن پکیج لیست کنیم، میانبر هایی برای آن های می نویسیم تا آن ها را به راحتی اجرا کنند. به عنوان مثال به جای اینکه از  npm webpack --mode production استفاده کنیم، کافیست دستور کوتاه  npm run build را اجرا نماییم.

“dependencies” :

فیلد dependencies شامل لیست تمام پکیج هایی است که پروژه برای تولید به آن ها وابسته است. زمانی که پروژه را در NPM Registry منتشر می کنید، این فیلد تضمبن می کند که Package Manager ها بتوانند پکیج هایی که برای اجرای این پروژه نیاز است را پیدا کرده و آن ها را نصب کنند.

برای اضافه کردن پکیجی به این لیست می توانیم از یکی از راه های زیر استفاده کنیم.

• به صورت دستی نام و نسخه پکیج مورد نظر را به این لیست اضافه کنیم.
• در هنگام نصب پکیج از Flag ویا پرچم  --save استفاده کنیم.

“devdependencies” :

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

این پکیج ها نیز با دستور npm installدر فولدر node_modules نصب می شوند. البته که این پکیج ها فقط در محیط توسعه پروژه در دسترس هستند و در سرور اصلی محصول موجود نخواهند بود. برای اضفه کردن این پکیج ها به پروژه دو راه وجود دارد.

• نام و نسخه معنایی هر پکیجی را که پروژه ما برای اهداف توسعه و تست به آن وابستگی دارد، به صورت دستی اضافه کنیم.
• بعد از دستور نصب آن پکیج از Flag‌ و یا پرچم --save-devاستفاده نماییم.

“homapage” :

وظیفه این فیلد این است که که نشانی اینترنتی صفحه مربوط به این پکیج را در خود ذخیره کند و در پایان نصب و یا در NPM Registry به کاربر نمایش دهد.

“keywords” :

لیست کلماتی است که کاربر با جستجوی آن ها در NPM Registry (منظور همان سایت npmjs.com است) میتواند به پکیج و یا پروژه شما دسترسی داشته باشد. به عبارت دیگر بخشی از اطلاعاتی است که هنگام اجرای فرمان جستجوی npm نشان داده می‌شود.

“author” :

این فیلد در فایل package.json شامل اطلاعات مربوط به نویسنده و این پکیج و یا پروژه می باشد. نکته قابل توجه این است که فقط فیلد name در این لیست اجباری می باشد و مابقی فیلد ها به صورت اختیاری تکمیل می شوند.

جمع بندی

در این مقاله و یا آموزش از تیک4 قصد داشتیم پکیج منیجر (Package Manger) معروف و کاربردی NPM را معرفی کنیم. نحوه کار با دستورات آن را بررسی کنیم و مزایای استفاده از آن را در پروژه ها بیان کنیم. البته که بحث در این مورد بسیار مقصل و طولانی است و آموزش های تکمیلی در ادامه به همین پست اضافه می شوند. از این که تا انتهای این آموزش همراه ما بودید سپاسگزاریم. شما می توانید اگر تجربه کار با NPM را دارید، در قسمت دیدگاه ها با دیگر کاربران به اشتراک بگذارید. همچنین در قسمت دیدگاه می توانید سوالات مربوط به این مقاله را بپرسید تا کارشناسان ما در کوتاه ترین زمان پاسخگوی شما باشند.