npm'ga birinchi qadam: package.json, npm install va scripts

Qisqacha: npm — Node.js bilan birga keladigan paket menejeri: boshqa dasturchilar yozgan tayyor kodni (paketni) bitta buyruq bilan loyihangizga qo'shadi. npm init -y loyiha "pasporti" — package.json ni yaratadi, npm install nom paketni o'rnatadi va pasportga yozadi. Paketlar node_modules papkasiga tushadi, aniq versiyalari package-lock.json da saqlanadi. scripts bo'limidagi buyruqlar npm run nom bilan ishga tushadi.

Bu darsda

• npm nima ekanini va u qaysi muammoni hal qilishini tushuntirasiz.
• npm init -y bilan package.json yaratib, uning har bir qatorini o'qiy olasiz.
• Paketni o'rnatasiz, olib tashlaysiz va dependencies bilan devDependencies ni farqlaysiz.
• node_modules va package-lock.json nima ekanini, qaysi biri saqlanishi kerakligini bilasiz.
• scripts yozasiz, npx bilan paketni o'rnatmasdan ishga tushirasiz va ^1.2.3 belgisini o'qiysiz.

Oldin bilishingiz kerak: Node.js nima va uni o'rnatish, JSON: dasturlar tili, Dastur o'rnatish va paket menejerlari.

1. Nega bu kerak?

Siz Telegram bot yozmoqchisiz. Bot Telegram serveri bilan gaplashishi, xabarlarni o'qishi, javob yuborishi kerak. Buni noldan yozish — haftalab ish.

Lekin bu ishni kimdir allaqachon qilgan va kodini hammaga ochiq qo'ygan. Siz uni olib, ishlatasiz. Xuddi uy qurayotganda g'ishtni o'zingiz pishirmay, bozordan tayyor olganingizdek.

OS darajasidagi paket menejerlari darsida winget va brew dasturlarni kompyuterga o'rnatishini ko'rdik. npm ham paket menejeri, lekin boshqa darajada: u butun kompyuterga emas, bitta loyihaga kod qo'shadi.

2. npm nima?

2.1 Ikki narsa bir nomda

npm (Node Package Manager — Node paket menejeri) ikki narsaning nomi:

1. Terminal buyrug'i — npm. Node.js bilan birga o'rnatiladi. Oldingi darsda npm -v bilan tekshirgan edik.
2. Registr (registry) — npmjs.com saytidagi ulkan onlayn katalog. Unda millionlab paket bor.

Paket (package) — boshqalar foydalanishi uchun e'lon qilingan tayyor kod to'plami. Ko'pincha kutubxona (library) deb ham ataladi: biror ishni bajaradigan tayyor funksiyalar to'plami.

flowchart LR
  A["Siz: npm install picocolors"] --> B["npm registry<br/>npmjs.com"]
  B --> C["node_modules/picocolors"]
  A --> D["package.json ga yozuv"]
  A --> E["package-lock.json ga<br/>aniq versiya"]

2.2 Paketlarga misollar

Tekshirib ko'ring: winget install va npm install ning farqi nimada?

3. package.json: loyiha pasporti

3.1 Yaratish

Har bir Node.js loyihasi package.json faylidan boshlanadi. Unda loyiha nomi, qaysi paketlar kerakligi va qanday buyruqlar bilan ishga tushishi yoziladi.

Yangi papka ochib, VS Code'da oching va ichki terminalda yozing:

mkdir mening-loyiham
cd mening-loyiham
npm init -y

npm init — "yangi loyiha boshlash". U nom, versiya, muallif kabi savollarni beradi. -y (yes — "ha") hamma savolga "standart javob bo'laversin" deydi va darhol fayl yaratadi.

Natija (Node 24 bilan kelgan npm 11 da):

{
  "name": "mening-loyiham",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "type": "commonjs"
}

3.2 Har qator nima degani

Hozircha type dan boshqasini o'zgartirish shart emas. type ni esa hozir o'zgartiramiz.

3.3 "type": "module"

JavaScript'da boshqa fayldagi yoki paketdagi kodni olib kelishning ikki usuli bor:

• ESM (ECMAScript modules) — zamonaviy usul, import so'zi bilan. Bu kursda asosan shu ishlatiladi.
• CommonJS — eski usul, require(...) bilan. Eski kodlarda ko'p uchraydi.

npm 11 standart holatda "type": "commonjs" yozadi. Biz import ishlatamiz, shuning uchun uni o'zgartiramiz:

"type": "module"

Modullarni 10-qismda chuqur o'rganamiz. Hozircha qoida: import ishlatadigan loyihada package.json da "type": "module" bo'lsin.

Tekshirib ko'ring: npm init va npm init -y farqi nimada?

4. Paket o'rnatish: npm install

4.1 Birinchi paket

picocolors — terminalda matnni rangli qiladigan kichik paket. O'rnatamiz:

npm install picocolors

added 1 package, and audited 2 packages in 2s

found 0 vulnerabilities

• added 1 package — 1 ta paket qo'shildi.
• audited — npm o'rnatilganlarni ma'lum zaifliklar ro'yxati bilan solishtirdi.
• found 0 vulnerabilities — xavfsizlik muammosi topilmadi.

install ning qisqasi — i: npm i picocolors ham xuddi shu.

4.2 Nima o'zgardi

Loyihada uchta o'zgarish bo'ldi:

mening-loyiham/
├── node_modules/        ← paketlarning o'zi
│   └── picocolors/
├── package.json         ← "dependencies" qo'shildi
└── package-lock.json    ← aniq versiyalar

package.json ga yangi bo'lim qo'shildi:

"dependencies": {
  "picocolors": "^1.1.1"
}

^1.1.1 belgisini "Versiya raqamlari" bo'limida o'qiymiz.

4.3 Paketni ishlatish

index.js fayl yarating:

import pc from "picocolors";

console.log(pc.green("Salom, npm!"));
console.log(pc.bold("IlmHamroh"));

Har qator:

• import pc from "picocolors"; — "picocolors paketini olib kel va uni pc deb atayman".
• pc.green("...") — matnni yashil rangga bo'yaydi.
• pc.bold("...") — matnni qalin qiladi.

Ishga tushiring:

node index.js

Terminalda (ranglar bu yerda ko'rinmaydi, sizda — ko'rinadi):

Salom, npm!
IlmHamroh

Birinchi qator yashil, ikkinchisi qalin. Siz rang chiqarishning qanday ishlashini bilmaysiz — va bilish shart ham emas. Paket shu uchun kerak.

4.4 Olib tashlash

npm uninstall picocolors

Paket node_modules dan, package.json dan va lock-fayldan o'chiriladi.

Tekshirib ko'ring: npm install picocolors dan keyin loyihada qaysi uchta narsa o'zgaradi?

5. dependencies va devDependencies

Paketlar ikki xil bo'ladi:

Bog'liqlik (dependency) — loyihangiz tayanadigan paket. Uning "ishlash uchun" va "yozish uchun" turlari bor.

O'xshatish: restoran. Go'sht, guruch, sabzi — oshning o'zi uchun kerak (dependencies). Pichoq, qozon, tarozi — faqat oshpazga, mijozning likopchasiga tushmaydi (devDependencies).

• picocolors dasturingiz ishlaganda rang chiqaradi — dependencies.
• prettier faqat siz kod yozayotganda uni tekislaydi. Tayyor dastur uni ishlatmaydi — devDependencies.

npm install -D prettier

-D — --save-dev ning qisqasi. package.json da yangi bo'lim paydo bo'ladi:

"devDependencies": {
  "prettier": "^3.9.9"
}

Versiya raqami siz o'rnatgan kunga qarab boshqacha bo'ladi.

Tekshirib ko'ring: Sayt serverini yaratadigan express paketi qaysi bo'limga tushadi? Kodni tekshiradigan eslint-chi?

6. node_modules va package-lock.json

6.1 node_modules — og'ir, lekin qayta tiklanadi

O'rnatilgan har paketning kodi node_modules papkasiga tushadi. Paketlarning ham o'z bog'liqliklari bor, ularniki ham — shuning uchun bu papka tez kattalashadi. Oddiy React loyihasida unda o'n minglab fayl va yuzlab megabayt bo'ladi.

Lekin uni saqlash yoki boshqa kompyuterga ko'chirish shart emas. package.json da nima kerakligi yozilgan. Boshqa kompyuterda loyiha papkasida:

npm install

— paket nomisiz. npm package.json ni o'qiydi va node_modules ni qaytadan yuklaydi.

Shuning uchun loyihani do'stingizga yuborganda yoki keyinchalik Git'ga saqlaganda node_modules qo'shilmaydi. Git'da buning uchun .gitignore fayli bor (qidirish darsida ko'rgan edik), unga node_modules yoziladi. Git'ni 07-qismda o'rganamiz.

6.2 package-lock.json — aniq versiyalar muhri

package.json da "^1.1.1" yozilgan — bu "1.1.1 yoki undan yangirog'i" degani. Bugun o'rnatsangiz 1.1.1, bir oydan keyin 1.2.0 tushishi mumkin. Jamoada kimdadir bir versiya, kimdadir boshqasi — "menda ishlaydi, senda ishlamaydi" muammosi.

package-lock.json bunga yo'l qo'ymaydi. Unda har paketning aniq o'rnatilgan versiyasi yozilgan:

"node_modules/picocolors": {
  "version": "1.1.1",
  "resolved": "https://registry.npmjs.org/picocolors/-/...tgz",
  "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX...",
  "license": "ISC"
}

• version — aniq versiya.
• resolved — qayerdan yuklangani.
• integrity — faylning "barmoq izi". Yuklangan fayl buzilgan yoki almashtirilgan bo'lsa, npm buni sezadi va o'rnatmaydi.

Bu fayl qo'lda tahrirlanmaydi — npm o'zi yozadi. U saqlanadi va loyiha bilan birga yuboriladi.

Maslahat: Serverlarda va avtomatik tekshiruvlarda npm install o'rniga npm ci ishlatiladi. U faqat lock-fayldagi aniq versiyalarni o'rnatadi va hech narsani yangilamaydi. Bu haqda 16-qismda batafsil.

Tekshirib ko'ring: Jasur loyihani fleshkaga ko'chirmoqchi, lekin node_modules 400 MB. Nima qilsin?

7. scripts: buyruqlarga nom berish

7.1 Yozish va ishga tushirish

package.json dagi scripts bo'limi — loyihaning buyruqlar ro'yxati. Har buyruqqa qisqa nom berasiz:

"scripts": {
  "start": "node index.js",
  "dev": "node --watch index.js",
  "salom": "echo Salom IlmHamroh"
}

Ishga tushirish — npm run va nom:

npm run salom

> mening-loyiham@1.0.0 salom
> echo Salom IlmHamroh

Salom IlmHamroh

npm avval qaysi buyruqni bajarayotganini > bilan ko'rsatadi, keyin natijani chiqaradi.

start va test — maxsus nomlar: ularda run ni tashlab ketsa bo'ladi. npm start = npm run start.

Hamma skriptlar ro'yxati — faqat npm run (nomsiz).

7.2 Nega kerak

• Uzun buyruqni eslab qolish shart emas: npm run dev hamma loyihada deyarli bir xil.
• Yangi dasturchi package.json ni ochib, loyiha qanday ishga tushishini darhol ko'radi.
• VS Code tasklari ham npm skriptlarini o'zi taniydi va ro'yxatda ko'rsatadi.

Diqqat: Windows'da npm skriptlari cmd.exe orqali bajariladi — PowerShell'dan ishga tushirsangiz ham. cmd bitta tirnoqni (') tushunmaydi: "echo 'Salom'" skripti 'Salom' ni tirnoqlari bilan chiqaradi. Skriptlarda tirnoqsiz yozing yoki ichki qo'shtirnoqni \" bilan ekranlang.

Tekshirib ko'ring: scripts da "tekshir": "node tekshir.js" bor. Uni npm tekshir bilan ishga tushirsa bo'ladimi?

8. npx: o'rnatmasdan ishga tushirish

Ba'zi paketlar kutubxona emas, buyruq — terminalda ishga tushadigan dastur. Ularni har loyihaga o'rnatish shart emas. npx — paketni vaqtincha yuklab, bir marta ishga tushiradigan buyruq. U ham npm bilan birga keladi.

Sinab ko'ramiz — cowsay matnni sigir "gapirayotgandek" chiqaradi:

npx cowsay Salom

Birinchi marta npx so'raydi:

Need to install the following packages:
cowsay@1.6.0
Ok to proceed? (y)

"Quyidagi paketni o'rnatish kerak. Davom etaymi?" — y bosib Enter:

 _______
< Salom >
 -------
        \   ^__^
         \  (oo)\_______
            (__)\       )\/\
                ||----w |
                ||     ||

Paket loyihangizga qo'shilmadi — package.json o'zgarmaydi. npx uni alohida keshda saqlaydi, keyingi safar tezroq ochiladi.

Real ishda npx ko'pincha loyiha yaratish uchun ishlatiladi. Masalan, npm create vite@latest — yangi frontend loyihasi (16-qismda). Loyihada o'rnatilgan buyruqni ishga tushirishda ham qulay: npx prettier --write . — node_modules dagi Prettier bilan hamma faylni tekislash.

Diqqat: npx paket kodini kompyuteringizda ishga tushiradi. Nomini diqqat bilan yozing — cowsay o'rniga cowsey yozsangiz, butunlay boshqa (ehtimol zararli) paket ishlab ketishi mumkin. "Ok to proceed?" savoli — tekshirish uchun oxirgi imkoniyat.

9. Versiya raqamlari: semver qisqacha

9.1 Uch raqam

Paket versiyalari uch raqamdan iborat: MAJOR.MINOR.PATCH. Bu tartib semver (Semantic Versioning — ma'noli versiyalash) deyiladi.

9.2 ^ va ~ belgilari

package.json dagi versiya oldidagi belgi — "qaysi yangilanishlarga ruxsat":

npm standart holatda ^ qo'yadi — "buzmaydigan yangilanishlar kelaversin".

Bitta istisno: 0.x.y versiyalar hali "tayyor emas" hisoblanadi, shuning uchun ^0.2.3 faqat 0.2.x ga ruxsat beradi.

Endi siz to'ldiring. package.json da "prettier": "^3.9.9" yozilgan. 4.0.0 o'rnatiladimi?

Tekshirib ko'ring: "express": "~5.1.0". Qaysi versiyalar mos keladi: 5.1.4, 5.2.0, 6.0.0?

10. Ko'p uchraydigan xatolar

10.1 package.json yo'q papkada

Belgisi:

npm error code ENOENT
npm error enoent Could not read package.json: Error: ENOENT:
no such file or directory, open 'C:\Users\Ali\package.json'

Tarjima: "package.json ni o'qib bo'lmadi: bunday fayl yoki papka yo'q." ENOENT — "Error NO ENTry", ya'ni "topilmadi". Sabab: npm start yoki npm run ni loyiha papkasidan tashqarida yozdingiz. Xabardagi yo'l qayerda qidirganini ko'rsatadi. Tuzatish: cd bilan loyiha papkasiga o'ting. Yangi loyiha bo'lsa — avval npm init -y.

10.2 Paket nomida xato

Belgisi:

npm error code E404
npm error 404 Not Found - GET https://registry.npmjs.org/picocolor

Tarjima: "404 — topilmadi" (HTTP status kodlari darsi). Sabab: registrda bunday nomli paket yo'q. Bu yerda oxiridagi s tushib qolgan. Tuzatish: nomni npmjs.com'da tekshiring. Xato yozilgan nom bilan mavjud boshqa paket bo'lsa, xato chiqmaydi — boshqa narsa o'rnatiladi. Bu yanada xavfli.

10.3 import ishlamayapti

Belgisi:

SyntaxError: Cannot use import statement outside a module

Tarjima: "import ni moduldan tashqarida ishlatib bo'lmaydi." Sabab: package.json da "type": "commonjs" (yoki type umuman yo'q), siz esa import yozgansiz. Tuzatish: package.json da "type": "module" qiling.

10.4 Paket topilmadi

Belgisi:

Error [ERR_MODULE_NOT_FOUND]: Cannot find package 'picocolors'
imported from C:\loyihalar\mening-loyiham\index.js

Tarjima: "index.js import qilgan 'picocolors' paketi topilmadi." Sabab: paket o'rnatilmagan — ko'pincha loyihani boshqa joydan ko'chirgandan keyin npm install unutilgan. Tuzatish: loyiha papkasida npm install.

10.5 Skript yo'q

Belgisi: npm error Missing script: "dev". Tarjima: "dev degan skript yo'q." Tuzatish: npm run bilan mavjud skriptlarni ko'ring. Nom xato yozilgan yoki scripts ga qo'shilmagan.

11. Mashqlar

1-mashq (oson): Pasport

1. sinov-npm papkasini yarating va unda npm init -y qiling.
2. package.json ni oching.

Savollar: loyiha nomi nima? scripts da nechta skript bor? type qiymati nima?

2-mashq (o'rta): Ikki xil bog'liqlik

sinov-npm ga picocolors ni oddiy bog'liqlik, prettier ni dasturchi asbobi sifatida o'rnating. Keyin package.json qanday ko'rinishini yozing (faqat ikki bo'lim). Yordam: -D — "dependencies va devDependencies" bo'limida.

npm install picocolors
npm install -D prettier

"dependencies": {
  "picocolors": "^1.1.1"
},
"devDependencies": {
  "prettier": "^3.9.9"
}

3-mashq (o'rta): Rangli salom

sinov-npm da index.js yozing: u qizil rangda Diqqat! va yashil rangda Hammasi joyida chiqarsin. npm start bilan ishga tushsin.

Yordam: qizil — pc.red(...), yashil — pc.green(...). "type": "module" va start skriptini unutmang.

"type": "module",
"scripts": {
  "start": "node index.js"
}

import pc from "picocolors";

console.log(pc.red("Diqqat!"));
console.log(pc.green("Hammasi joyida"));

> sinov-npm@1.0.0 start
> node index.js

Diqqat!
Hammasi joyida

4-mashq (qiyin): Qayta tiklash

1. sinov-npm dagi node_modules papkasini o'chiring.
2. npm start qiling — qanday xato chiqadi?
3. Xatoni bitta buyruq bilan tuzating.
4. Qaysi fayl node_modules ni aynan o'sha versiyalar bilan tiklashga imkon berdi?

12. Hujumchi nigohi

npm'dagi paketni istalgan odam e'lon qila oladi. Siz npm install qilganingizda — boshqa odamning kodini kompyuteringizda ishga tushirasiz. Hujumchilar buni biladi.

Hujum 1 — o'xshash nom. Mashhur paketga bir harfi farq qiladigan nom bilan zararli paket chiqariladi. picocolors ni shoshib yozgan dasturchi bitta harfni adashtiradi va o'sha soxta paketni o'rnatadi.

Hujum 2 — o'rnatish skripti. Paket package.json ida o'rnatilganda avtomatik ishlaydigan skript (masalan postinstall) bo'lishi mumkin. Zararli paket shu skript bilan .env fayllari va tokenlaringizni o'g'irlaydi — siz import ham qilmasdan.

Hujum 3 — yaxshi paketni egallash. Muallifning hisobi o'g'irlanadi va mashhur paketga zararli yangilanish chiqariladi. 2025-yil sentabrida shunday bo'lgan: chalk va debug kabi paketlarning (birgalikda haftasiga milliardlab yuklanadi) zararli versiyalari bir necha soat registrda turdi. O'sha oyda o'zini o'zi tarqatadigan "Shai-Hulud" zararli dasturi yuzlab paketga yuqdi.

Qanday qarshi turamiz:

• Paket nomini npmjs.com'dan ko'chirib olamiz, xotiradan yozmaymiz. Haftalik yuklab olishlar soni va oxirgi yangilanishga qaraymiz.
• Keraksiz paket qo'shmaymiz. 5 qatorlik ish uchun paket shart emas.
• package-lock.json ni saqlaymiz — kutilmagan yangi versiya o'zi kirib kelmaydi.
• npm audit — o'rnatilganlarda ma'lum zaifliklar bormi, tekshiradi.
• Parol va tokenlarni kodga yozmaymiz (.env darsi).

13. Real ishda

• Har bir loyiha package.json bilan boshlanadi. Ishga kirgan birinchi kuningiz: loyihani olasiz → npm install → npm run dev. Qaysi buyruq borligini scripts dan ko'rasiz.
• Kurs davomida npm har qismda: React, Express, Prettier, ESLint, Vite — hammasi npm paketi.
• Muqobillar. pnpm va yarn — npm'ning o'rnini bosadigan boshqa paket menejerlari, bun — Node.js'ning muqobili. Ular ham package.json bilan ishlaydi. 16-qismda solishtiramiz.
• Intervyuda so'raladi: "dependencies va devDependencies farqi?", "package-lock.json nima uchun?", "^ va ~ farqi?". Bu darsdan keyin uchalasiga javob bera olasiz.

Xulosa

• npm — Node.js bilan keladigan paket menejeri; paketlar npmjs.com registridan olinadi.
• npm init -y → package.json; import uchun "type": "module".
• npm install nom → dependencies; npm install -D nom → devDependencies; npm uninstall nom — olib tashlash.
• node_modules saqlanmaydi, npm install uni tiklaydi; package-lock.json saqlanadi.
• scripts → npm run nom (start, test — run siz); npx — o'rnatmasdan ishga tushirish.
• ^1.2.3 — MAJOR o'zgarmaguncha yangilanish; ~1.2.3 — faqat PATCH.

Keyingi dars: Boshqa muharrirlar va Vim'da omon qolish — VS Code'dan boshqa muharrirlar bilan tanishasiz va Vim'dan qanday chiqishni o'rganasiz.

Manbalar

• npm Docs: package.json
• npm Docs: npm install
• semver kalkulyatori