package.json bog'liqlik turlari: dependencies, devDependencies, peerDependencies va overrides

Qisqacha: Bo'lim dependencies — dastur ishlaganda kerak bo'lgan paketlar, devDependencies esa faqat dasturchiga (formatlash, lint, build) kerak bo'lganlari. Bo'lim peerDependencies — "meni o'rnatgan loyihada falon paket bo'lsin" degan talab (plaginlar uchun). optionalDependencies o'rnatilmasa ham xato bermaydi, overrides esa chuqurdagi paket versiyasini majburlaydi. Noto'g'ri bo'lim tanlansa, server ERR_MODULE_NOT_FOUND beradi yoki npm install ERESOLVE bilan to'xtaydi.

Bu darsda

• dependencies va devDependencies qachon farq qilishini npm ci --omit=dev bilan ko'rasiz.
• Frontend loyihada "dev" farqi nega boshqacha ekanini va vazifalar dagi web-vitals sirini bilasiz.
• peerDependencies va peerDependenciesMeta ni o'qiysiz, peer to'qnashuvini taniysiz.
• optionalDependencies va EBADPLATFORM ni farqlaysiz.
• overrides bilan chuqurdagi versiyani almashtirasiz va uning uch tuzog'ini bilasiz.

Oldin bilishingiz kerak: package.json I: pasport maydonlari, npm buyruqlari chuqur, npm'ga birinchi qadam.

1. Nega bu kerak?

Sardor «Bahor» uchun kichik chek dasturini yozdi. Kompyuterida hammasi ishladi. Keyin uni serverga qo'ydi. Serverda o'rnatish npm ci --omit=dev bilan bo'ldi — "dasturchi asboblarisiz". Dastur ishga tushdi va darhol yiqildi:

Error [ERR_MODULE_NOT_FOUND]: Cannot find package 'picocolors' imported from …\xato-tur\chek.js

"picocolors paketi topilmadi". Lekin u o'rnatilgan edi-ku! Sabab bitta so'zda: paket package.json ning noto'g'ri bo'limiga yozilgan.

O'tgan ikki darsda yana bir jumboq qoldi. vazifalar da npm ls --omit=dev bo'sh chiqqan edi. web-vitals esa brauzerda ishlaydi. Bugun ikkala savolga javob topamiz.

package.json da bog'liqlik yozadigan oltita maydon bor. Har biri boshqa savolga javob beradi:

Sxemada — qaysi bo'lim qachon o'rnatiladi:

flowchart LR
  P["package.json"] --> D["dependencies<br/>doim"]
  P --> V["devDependencies<br/>--omit=dev da yo'q"]
  P --> R["peerDependencies<br/>mezbon loyihadan"]
  P --> O["optionalDependencies<br/>mos bo'lsa"]
  P --> X["overrides<br/>daraxtni o'zgartiradi"]

Maslahat: Chiqishlar 2026-10-07 da Windows 11, Node 24.21.0 va npm 11.19.0 bilan olingan. Yo'l boshini … bilan qisqartirdik — sizda o'z papkangiz chiqadi. Vaqtlar (in 944ms) ham har safar boshqacha.

2. dependencies va devDependencies

2.1 Sinov loyihasi

npm'ga birinchi qadam darsidagi o'xshatishni eslang: go'sht va guruch — oshning o'zi uchun (dependencies), pichoq va qozon — faqat oshpazga (devDependencies). Endi buni amalda tekshiramiz.

kurs/mashqlar/16/05-bogliqlik/bahor-chek/ da npm init -y va npm pkg set type=module. Chek rangli chiqsin — picocolors dastur ishlaganda kerak:

npm i -E picocolors@1.1.1

added 1 package, and audited 2 packages in 944ms

found 0 vulnerabilities

Prettier esa faqat kodni tekislaydi — dasturchi asbobi:

npm i -D -E prettier@3.9.9

added 1 package, and audited 3 packages in 933ms

1 package is looking for funding
  run `npm fund` for details

found 0 vulnerabilities

-E — aniq versiya, ^ siz (npm buyruqlari chuqur). chek.js:

// chek.js — «Bahor» buyurtmasi uchun chek
import pc from "picocolors";

const order = [
  { name: "Osh", price: 35000 },
  { name: "Ko'k choy", price: 5000 },
];
const total = order.reduce((sum, item) => sum + item.price, 0);

for (const item of order) {
  console.log(`${item.name}: ${item.price} so'm`);
}
console.log(pc.bold(`Jami: ${total} so'm`));

scripts ga ikki buyruq qo'shdik: "start": "node chek.js" va "format:check": "prettier --check .". Natijadagi bog'liqliklar:

npm pkg get dependencies devDependencies

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

2.2 --omit=dev: faqat ishlash uchun keraklilar

Server yoki tayyor dastur uchun dasturchi asboblari ortiqcha: ular joy egallaydi va o'rnatishni sekinlashtiradi. --omit=dev ("dev ni tashlab ket") ularni o'tkazib yuboradi. node_modules ni o'chirib:

npm ci --omit=dev

added 1 package, and audited 2 packages in 798ms

found 0 vulnerabilities

Faqat bitta paket o'rnatildi. npm ls buni sezadi:

npm ls

bahor-chek@1.0.0 …\kurs\mashqlar\16\05-bogliqlik\bahor-chek
+-- picocolors@1.1.1
`-- UNMET DEPENDENCY prettier@3.9.9

npm error code ELSPROBLEMS
npm error missing: prettier@3.9.9, required by bahor-chek@1.0.0
npm error A complete log of this run can be found in: …\npm-cache\_logs\2026-10-07T06_39_40_897Z-debug-0.log

UNMET DEPENDENCY — biz o'zimiz tashlab ketganimiz uchun, kutilgan holat. Faqat ishlash uchun keraklilarni ko'rish — npm ls --omit=dev (o'tgan darsdagi bayroq). Dastur esa ishlaydi:

npm start

> bahor-chek@1.0.0 start
> node chek.js

Osh: 35000 so'm
Ko'k choy: 5000 so'm
Jami: 40000 so'm

(Terminalda oxirgi qator qalin.) Prettier esa yo'q:

npm run format:check

> bahor-chek@1.0.0 format:check
> prettier --check .

'prettier' is not recognized as an internal or external command,
operable program or batch file.

"prettier ichki yoki tashqi buyruq sifatida tanilmadi" — Windows cmd xabari. macOS va Linux'da sh: 1: prettier: not found ko'rinishida bo'ladi. Serverda kod formatlanmaydi, demak bu to'g'ri.

Diqqat: --omit ga faqat dev, optional yoki peer beriladi. npm ls --omit=prod deb yozsak, npm ogohlantiradi (Must be one or more of: dev, optional, peer) va bayroqni e'tiborsiz qoldiradi.

2.3 Noto'g'ri bo'lim: serverda yiqilish

Endi «Nega bu kerak?» bo'limidagi voqeani takrorlaymiz. Loyiha nusxasi xato-tur/ da picocolors ni -D bilan o'rnatdik — go'yo Sardor bayroqni adashtirgan. Kompyuterda npm install hammasini qo'yadi, xato ko'rinmaydi. Serverdagidek o'rnatamiz:

npm ci --omit=dev

up to date, audited 1 package in 337ms

found 0 vulnerabilities

Hech narsa o'rnatilmadi — ikkala paket ham devDependencies da.

npm start

> bahor-chek@1.0.0 start
> node chek.js

node:internal/modules/package_json_reader:331
  throw new ERR_MODULE_NOT_FOUND(packageName, fileURLToPath(base), null);
        ^

Error [ERR_MODULE_NOT_FOUND]: Cannot find package 'picocolors' imported from …\kurs\mashqlar\16\05-bogliqlik\xato-tur\chek.js
    at Object.getPackageJSONURL (node:internal/modules/package_json_reader:331:9)
…
  code: 'ERR_MODULE_NOT_FOUND'
}

Node.js v24.21.0

(at … qatorlari qisqartirildi.) Tarjima: "chek.js import qilgan picocolors paketi topilmadi". Node node_modules da paketni qidirdi va topmadi — u package.json bo'limlarini bilmaydi, faqat diskka qaraydi.

Qoida: dastur ishlayotganda import qilinadigan paket — dependencies da. Faqat buyruq sifatida ishlatiladigan asbob (prettier, eslint, tsc) — devDependencies da.

2.4 Tuzoq: npm i paketni ko'chirmaydi

Sardor xatoni tushundi va paketni qayta o'rnatdi:

npm i -E picocolors@1.1.1

up to date, audited 3 packages in 769ms

1 package is looking for funding
  run `npm fund` for details

found 0 vulnerabilities

up to date — "hammasi joyida". npm pkg get devDependencies esa picocolors ni hamon o'sha yerda ko'rsatadi! Paket allaqachon bor bo'lsa, npm i uning bo'limiga tegmaydi. Ko'chirish uchun bo'limni aniq ayting: -P (--save-prod):

npm i -P -E picocolors@1.1.1

npm warn idealTree Removing devDependencies.picocolors in favor of dependencies.picocolors

up to date, audited 3 packages in 785ms

1 package is looking for funding
  run `npm fund` for details

found 0 vulnerabilities

"devDependencies.picocolors ni olib tashlayapman, dependencies.picocolors foydasiga". Endi npm ci --omit=dev bitta paket o'rnatadi va npm start chekni chiqaradi. Teskari yo'nalishda — -D.

2.5 Tuzoq: NODE_ENV=production

Muhit o'zgaruvchisi (environment variable) — dasturga tashqaridan beriladigan nomli qiymat (.env darsi). NODE_ENV=production ko'p serverda "bu production" degan belgi. npm ham uni o'qiydi:

NODE_ENV=production npm ci

added 1 package, and audited 2 packages in 864ms

found 0 vulnerabilities

Biz --omit=dev yozmadik, lekin Prettier baribir o'rnatilmadi. npm hujjatiga ko'ra: NODE_ENV production bo'lsa, omit ning sukut qiymati dev bo'ladi. Bu odatda server uchun qulay. Lekin build serverda bo'lsa (Vite, tsc — devDependencies da), build "vite topilmadi" bilan yiqiladi. Shunday holatda npm ci --include=dev yozing.

Tekshirib ko'ring: Malika «Bahor» uchun Telegram bot yozdi. Bot grammy kutubxonasi bilan ishlaydi, kodini eslint tekshiradi, testlari node:test da. Har paket qaysi bo'limga tushadi?

3. Frontendda "dev" farqi

3.1 Bundler hammasini yig'adi

Node dasturi node_modules dan to'g'ridan-to'g'ri o'qiydi. Shuning uchun serverda bo'lim noto'g'ri bo'lsa, xato chiqadi. Frontend loyihada esa boshqacha. Brauzer node_modules ni umuman ko'rmaydi. Asboblar zanjiri darsidagi sxemani eslang: bundler kerakli kodni node_modules dan oladi va dist/ ga yig'adi. Saytga faqat dist/ chiqadi.

Bundler paketning qaysi bo'limda turganiga qaramaydi. devDependencies dagi kutubxonani import qilsangiz ham, u dist/ ga tushadi. Demak frontendda bo'lim — asosan kelishuv: kodni o'qiyotgan odamga "bu brauzerga boradi" yoki "bu faqat asbob" deb aytadi.

Vite'ning rasmiy shablonlari aynan shu kelishuvga amal qiladi. create-vite 9.2.1 ichidagi React + TypeScript shablonining package.json idan:

{
  "dependencies": {
    "react": "^19.2.8",
    "react-dom": "^19.2.8"
  },
  "devDependencies": {
    "@types/node": "^24.13.3",
    "@types/react": "^19.2.18",
    "@types/react-dom": "^19.2.7",
    "@vitejs/plugin-react": "^6.1.1",
    "oxlint": "^1.81.0",
    "typescript": "~6.0.2",
    "vite": "^8.3.0"
  }
}

React brauzerda ishlaydi — dependencies. Vite, TypeScript, turlar (@types/…) va linter — faqat build va tekshiruvda — devDependencies. Oddiy TypeScript shablonida (template-vanilla-ts) esa dependencies umuman yo'q: faqat typescript va vite. React'ni 17-qismda o'rganamiz, hozir faqat bo'limlarga qarang.

Bo'lim frontendda ham ahamiyatli bo'lib qoladigan joylar bor. Server tomonda render qiladigan freymvorklar (Next.js, kursning keyingi qismlarida) dependencies ni serverda ishlatadi. Paket chiqarsangiz esa, uni o'rnatgan odamga faqat sizning dependencies ingiz boradi.

3.2 vazifalar siri: web-vitals nega devDependencies da

Endi o'tgan darsdagi savol. kurs/vazifalar da:

npm explain web-vitals

web-vitals@6.2.3 dev
node_modules/web-vitals
  dev web-vitals@"6.2.3" from the root project

dev — "loyiha uni dasturchi asbobi sifatida so'ragan". Lekin web-vitals o'lchovlarni brauzerda yig'adi. Xato emasmi?

Hozircha — yo'q. vazifalar da bundler yo'q, brauzer esa node_modules dan import qila olmaydi. Shuning uchun 13-qismda skriptlar/vendor.js yozilgan. Buyruq npm run vendor paket faylini assets/js/vendor/web-vitals.js ga nusxalaydi, brauzer esa shu nusxani o'qiydi. npm paketi faqat nusxa olish uchun kerak — ya'ni dasturchi asbobi kabi. TEXNIK-QARZ.md ning 16-qatori shu haqda: "paket yangilansa nusxa o'zi yangilanmaydi".

Vite kelganda (Bundler nima darsi) hammasi o'zgaradi. olchov.ts to'g'ridan-to'g'ri import … from "web-vitals" qiladi, Vite paketni dist/ ga yig'adi, vendor/ papkasi o'chadi. O'sha qadamda web-vitals dependencies ga ko'chadi — endi u haqiqatan brauzer kodining bir qismi. Bugun vazifalar ga tegmaymiz.

Tekshirib ko'ring: Vite loyihasida Bobur dayjs (sanalar kutubxonasi) ni -D bilan o'rnatdi va saytda ishlatdi. npm run build ishlaydimi? Nima noto'g'ri?

4. peerDependencies: "mezbon bilan ishlayman"

4.1 Nima uchun kerak

Ba'zi paketlar o'zi yolg'iz ishlamaydi — ular boshqa paketning plagini (qo'shimchasi). typescript-eslint — ESLint uchun plagin, TypeScript'ni ishlatadi. react-dom — React'ni ekranga chizadi.

Printer kartrijini o'ylang. Kartrij printer bilan birga sotilmaydi va ichida o'z printeri yo'q. Uning qutisida faqat yozuv bor: "falon printerlarga mos". Peer bog'liqlik (peer dependency) — xuddi shu yozuv: "meni o'rnatgan loyihada bu paketning shu versiyasi bo'lsin".

Nega oddiy dependencies emas? Agar react-dom o'z ichiga alohida React olib kelganda, loyihada ikkita React bo'lardi. Ikkalasi bir-birining holatini ko'rmaydi va ilova g'alati xatolar beradi (node_modules ichida darsida). Peer esa "bitta nusxa — mezbonniki" deydi.

npm view react-dom@19.2.8 peerDependencies

{ react: '^19.2.8' }

vazifalar dagi juftlik — 15-qismdan tanish:

npm view typescript-eslint@8.71.1 peerDependencies

{
  eslint: '^8.57.0 || ^9.0.0 || ^10.0.0',
  typescript: '>=4.8.4 <6.1.0'
}

|| — "yoki": ESLint 8.57+, 9 yoki 10 bo'lsin. TypeScript esa 4.8.4 dan 6.1.0 gacha. Belgilarni Semver darsida to'liq o'qiymiz.

4.2 npm peer'larni o'zi o'rnatadi

Bo'sh peer/ papkasida faqat plaginni o'rnatamiz:

npm i -D -E typescript-eslint@8.71.1

added 95 packages, and audited 96 packages in 7s

29 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

95 ta paket. npm ls faqat bittasini ko'rsatadi — package.json da faqat u:

npm ls

peer@1.0.0 …\kurs\mashqlar\16\05-bogliqlik\peer
`-- typescript-eslint@8.71.1

TypeScript qayerdan? npm explain boshi:

npm explain typescript

typescript@6.0.3 dev peer
node_modules/typescript
  peer typescript@">=4.8.4 <6.1.0" from @typescript-eslint/eslint-plugin@8.71.1
…

Belgi dev peer — "dasturchi asbobi ichidagi peer". npm 7 dan beri peer bog'liqliklar avtomatik o'rnatiladi. Bu yerda npm chegaraga mos eng yangi versiyani tanladi (6.0.3) va eslint 10.12.0 ni ham qo'ydi.

Eski npm'larda (6 va undan oldingi) esa peer faqat ogohlantirish berardi — eski maqolalarda "peer'ni qo'lda o'rnating" degan maslahatni shuning uchun uchratasiz.

Shunga qaramay, mezbon paketni package.json ga o'zingiz yozing. npm i -D eslint typescript — shunda versiyani siz boshqarasiz, npm emas.

4.3 Peer to'qnashuvi: ERESOLVE

Loyihada TypeScript 7.0.2 bor va endi plaginni qo'shmoqchimiz:

npm i -D -E typescript-eslint@8.71.1

npm error code ERESOLVE
npm error ERESOLVE unable to resolve dependency tree
npm error
npm error While resolving: t10a@1.0.0
npm error Found: typescript@7.0.2
npm error node_modules/typescript
npm error   dev typescript@"7.0.2" from the root project
npm error
npm error Could not resolve dependency:
npm error peer typescript@">=4.8.4 <6.1.0" from typescript-eslint@8.71.1
npm error node_modules/typescript-eslint
npm error   dev typescript-eslint@"8.71.1" from the root project
…

Mazmuni: "Topildi: typescript 7.0.2. Hal qilib bo'lmadi: typescript-eslint 6.1.0 dan kichik TypeScript talab qiladi". Kartrij printerga mos emas. 15-qismda vazifalar aynan shunga duch kelgan va ikki TypeScript bilan (@typescript/native taxallusi) chiqqan. Xabarni qatorma-qator o'qish va --legacy-peer-deps ning narxi — node_modules ichida darsida.

4.4 peerDependenciesMeta: ixtiyoriy peer

Vite CSS'ni Sass yoki Less'dan ham yig'a oladi. Lekin har loyihaga Sass kerak emas. Shuning uchun Vite 8.3.3 ning peerDependencies ida 12 ta paket bor (sass, less, terser…) va har biri ixtiyoriy deb belgilangan:

npm view vite@8.3.3 peerDependenciesMeta.sass

{ optional: true }

optional: true — "o'rnatilmasa ham mayli, lekin o'rnatilsa — versiyasi mos bo'lsin". npm bunday peer'ni avtomatik o'rnatmaydi. Sass kerak bo'lsa, npm i -D sass qilasiz va Vite uni topadi.

O'z kutubxonangizni chiqarsangiz, peer npm i --save-peer nom bilan qo'shiladi. Ilova (vazifalar, «Bahor» sayti) yozayotganda peerDependencies ni o'zingiz deyarli yozmaysiz — faqat o'qiysiz.

Tekshirib ko'ring: @vitejs/plugin-react — Vite plagini. Uning package.json ida vite qaysi bo'limda turishi kerak va nega?

5. optionalDependencies: bo'lmasa ham mayli

Ba'zi paketlar faqat bitta operatsion tizimda ishlaydi. fsevents — macOS'ning fayl kuzatuvchisi:

npm view fsevents@2.3.3 os

darwin

darwin — macOS'ning ichki nomi. Windows'da oddiy o'rnatishga urinamiz:

npm i -E fsevents@2.3.3

npm error code EBADPLATFORM
npm error notsup Unsupported platform for fsevents@2.3.3: wanted {"os":"darwin"} (current: {"os":"win32"})
npm error notsup Valid os:  darwin
npm error notsup Actual os: win32
npm error A complete log of this run can be found in: …\npm-cache\_logs\2026-10-07T06_41_45_374Z-debug-0.log

"Qo'llanmaydigan platforma: kerak — darwin, hozirgi — win32". Endi -O (--save-optional) bilan:

npm i -O -E fsevents@2.3.3

up to date, audited 1 package in 1s

found 0 vulnerabilities

Xato yo'q. Paket optionalDependencies ga yozildi, lekin o'rnatilmadi. npm ls uni o'tgan darsdagi tanish belgi bilan ko'rsatadi: UNMET OPTIONAL DEPENDENCY fsevents@2.3.3 — xato emas.

Bu mexanizm sizga har kuni xizmat qiladi. Vite 8.3.3 ning optionalDependencies ida fsevents bor: macOS'da tezroq kuzatadi, boshqa tizimda usiz ishlaydi. TypeScript 7.0.2 ning optionalDependencies ida esa 20 ta paket — har tizim uchun tayyor dastur:

npm view @typescript/typescript-win32-x64@7.0.2 os cpu

os = 'win32'
cpu = 'x64'

npm 20 tadan faqat os va cpu ga mosini qo'yadi. Shuning uchun o'tgan darsda vazifalar da npm ls --all ko'p UNMET OPTIONAL DEPENDENCY qatori (20 ta) chiqargan edi.

Diqqat: Kodingiz ixtiyoriy paketni import qilsa, u yo'q bo'lgan tizim uchun zaxira yo'l yozing (try { await import("fsevents") } catch { … }). Aks holda Windows foydalanuvchisida ERR_MODULE_NOT_FOUND chiqadi.

6. overrides: chuqurdagi versiyani majburlash

6.1 Muammo va yechim

Siz faqat o'z package.json ingizni boshqarasiz. debug ni o'rnatsangiz, u ms ni o'zi tanlaydi. Bir kun ms da zaiflik topiladi, debug muallifi esa hali yangilamagan. Nima qilasiz?

Override (ustidan yozish) — "daraxtning qayerida bo'lmasin, bu paketning versiyasi shu bo'lsin" degan buyruq. override/ papkasida:

npm i -E debug@4.4.3

added 2 packages, and audited 3 packages in 907ms

found 0 vulnerabilities

npm ls ms

override@1.0.0 …\kurs\mashqlar\16\05-bogliqlik\override
`-- debug@4.4.3
  `-- ms@2.1.3

ms ni 2.1.2 ga majburlaymiz (sinov uchun — odatda yangiroqqa majburlanadi):

npm pkg set overrides.ms=2.1.2
npm install

added 1 package, removed 1 package, and audited 3 packages in 985ms

found 0 vulnerabilities

npm ls ms

override@1.0.0 …\kurs\mashqlar\16\05-bogliqlik\override
`-- debug@4.4.3
  `-- ms@2.1.2 overridden

overridden — "ustidan yozilgan". package.json da yangi bo'lim:

{
  "dependencies": {
    "debug": "4.4.3"
  },
  "overrides": {
    "ms": "2.1.2"
  }
}

Faqat bitta paket ichida almashtirish ham mumkin — ichma-ich obyekt bilan. npm pkg set overrides.debug.ms=2.1.2 shunday yozadi: "overrides": { "debug": { "ms": "2.1.2" } } — "faqat debug ichidagi ms".

6.2 Tuzoq 1: o'zgartirdingiz — npm sezmadi

Override'ni 1.0.0 ga o'zgartirdik va odatdagidek npm install:

npm pkg set overrides.ms=1.0.0
npm install

up to date, audited 3 packages in 853ms

found 0 vulnerabilities

up to date! npm ls ms esa boshqa gap aytadi:

override@1.0.0 …\kurs\mashqlar\16\05-bogliqlik\override
`-- debug@4.4.3
  `-- ms@2.1.2 invalid: "1.0.0" from node_modules/debug

npm error code ELSPROBLEMS

npm 11.19.0 mavjud override'ni o'zgartirganda lock-fayldagi yozuvni qayta ko'rmadi. Ishonchli yo'l — node_modules va package-lock.json ni o'chirib, qayta npm install. Shunda ms@1.0.0 overridden bo'ldi. Override'ni o'zgartirgandan keyin har safar npm ls <nom> bilan tekshiring.

6.3 Tuzoq 2: zaiflikka majburlash

Qayta o'rnatishning oxirgi qatorlari:

1 moderate severity vulnerability

To address all issues, run:
  npm audit fix

Run `npm audit` for details.

ms 1.0.0 da ma'lum zaiflik bor. debug muallifi ^2.1.3 deb yozgani bejiz emas edi — biz uning talabini buzdik. Override kuchli asbob: u paket muallifining chegarasini e'tiborsiz qoldiradi. Shuning uchun uni faqat yangiroq, tuzatilgan versiyaga majburlash uchun ishlating. Har override yoniga sababini yozib qo'ying (masalan, PR tavsifida) va muallif yangilagach olib tashlang (Begona paketni tuzatish).

6.4 Tuzoq 3: to'g'ridan-to'g'ri bog'liqlik bilan to'qnashuv

Override ms: 2.1.2 turibdi, endi ms ni o'zimiz ham o'rnatamiz:

npm i -E ms@2.1.3

npm error code EOVERRIDE
npm error Override for ms@2.1.3 conflicts with direct dependency
npm error A complete log of this run can be found in: …\npm-cache\_logs\2026-10-07T06_41_24_284Z-debug-0.log

"ms@2.1.3 uchun override to'g'ridan-to'g'ri bog'liqlik bilan to'qnashadi". Siz bir joyda "2.1.3", boshqa joyda "2.1.2" dedingiz. Yechim — $ havola: "overrides": { "ms": "$ms" } — "o'zimning dependencies dagi versiyam bilan bir xil bo'lsin". Shundan keyin npm i -E ms@2.1.3 o'tdi va debug ham 2.1.3 ni oldi (deduped).

6.5 Boshqa menejerlarda

G'oya bir xil, yozilishi farq qiladi. pnpm va Yarn — pnpm va Yarn va Bun darslarida.

package.json da yana bitta kam uchraydigan maydon bor: bundleDependencies — paket nashr qilinganda arxiv ichiga joylab yuboriladigan bog'liqliklar ro'yxati. U ilovalarda deyarli ishlatilmaydi, faqat eski kutubxonalarda uchraydi.

Tekshirib ko'ring: Jasur aka: "npm audit ms da zaiflik topdi, lekin bizda ms yo'q-ku!" Sardor nima qilishi kerak — tartib bilan.

7. Ko'p uchraydigan xatolar

8. Mashqlar

Mashqlar kurs/mashqlar/16/05-bogliqlik/ da.

1-mashq (oson): Bo'limni tanlang

«Bahor» sayti Vite + TypeScript'da. Har paket qaysi bo'limga tushadi?

• vite:
• dayjs (saytda sanani chiqaradi):
• @types/node:
• eslint:
• web-vitals (Vite bilan import qilinadi):

2-mashq (o'rta): Serverda yiqilgan chekni tuzating

1. «Bog'liqlik turlari» bo'limidagi bahor-chek ni yarating. Nusxasini xato-tur/ ga oling va unda picocolors ni devDependencies ga ko'chiring (npm un picocolors, keyin npm i -D -E picocolors@1.1.1).
2. node_modules ni o'chirib, npm ci --omit=dev, keyin node chek.js. Xato kodi:
3. Bitta buyruq bilan paketni dependencies ga ko'chiring va 2-qadamni takrorlang.

npm ci --omit=dev
node chek.js

added 1 package, and audited 2 packages in 801ms

found 0 vulnerabilities
Osh: 35000 so'm
Ko'k choy: 5000 so'm
Jami: 40000 so'm

3-mashq (o'rta): Faqat debug ichidagi ms

Yangi override-mashq/ papkasida debug@4.4.3 ni o'rnating. ms ni faqat debug ichida 2.1.2 ga majburlang. npm ls ms da qanday so'z chiqishi kerak:

Yordam: npm pkg set nuqta bilan ichma-ich yozadi («Muammo va yechim» bo'limi).

npm pkg set overrides.debug.ms=2.1.2
npm install
npm ls ms

added 1 package, removed 1 package, and audited 3 packages in 1s

found 0 vulnerabilities
override-mashq@1.0.0 …\override-mashq
`-- debug@4.4.3
  `-- ms@2.1.2 overridden

4-mashq (qiyin): Bo'lim tekshiruvchi

Bunday xatoni serverga chiqmasdan oldin ushlaydigan skript yozing. kurs/mashqlar/16/05-bogliqlik/tekshiruvchi/ da:

• bogliqlik.mjs — uch funksiya:
  • packageName(specifier) — import manzilidan paket nomi: "dayjs/locale/uz" → "dayjs", "@eslint/js/x" → "@eslint/js"; nisbiy yo'l (./), node: va Node'ning o'z modullari (fs) → null.
  • findImports(code) — matndagi from "x", import "x" va import("x") manzillari.
  • checkImports(pkg, specifiers) — { ok, devOnly, missing }: dependencies da, faqat devDependencies da, umuman yo'q.
• tekshir.mjs — node tekshir.mjs <papka> <fayl.js>; muammo bo'lsa chiqish kodi 1.
• bogliqlik.test.mjs — kamida 3 ta test.

Ishoralar: builtinModules — node:module dan, Node'ning o'z modullari ro'yxati. matchAll — RegExp asoslari va metodlari darsidan. Object.hasOwn(obj, key) — kalit obyektning o'zida bormi.

// bogliqlik.mjs — import qilingan paketlar package.json ning
// to'g'ri bo'limida turibdimi?
import { builtinModules } from "node:module";

// "picocolors" → "picocolors", "@eslint/js/x" → "@eslint/js",
// "./narx.js", "node:fs" va "fs" → null (npm paketi emas)
export function packageName(specifier) {
  if (specifier.startsWith(".") || specifier.startsWith("/")) {
    return null;
  }
  if (specifier.startsWith("node:")) return null;
  const parts = specifier.split("/");
  const name = specifier.startsWith("@")
    ? parts.slice(0, 2).join("/")
    : parts[0];
  return builtinModules.includes(name) ? null : name;
}

// Matndagi import manzillari: from "x", import "x", import("x")
export function findImports(code) {
  const re = /(?:from\s+|import\s*\(?\s*)["']([^"']+)["']/g;
  return [...code.matchAll(re)].map((m) => m[1]);
}

// ok — dependencies da, devOnly — faqat devDependencies da,
// missing — umuman yo'q
export function checkImports(pkg, specifiers) {
  const deps = pkg.dependencies ?? {};
  const devDeps = pkg.devDependencies ?? {};
  const names = new Set(
    specifiers.map(packageName).filter((n) => n !== null),
  );
  const result = { ok: [], devOnly: [], missing: [] };
  for (const name of [...names].sort()) {
    if (Object.hasOwn(deps, name)) result.ok.push(name);
    else if (Object.hasOwn(devDeps, name)) result.devOnly.push(name);
    else result.missing.push(name);
  }
  return result;
}

// tekshir.mjs — ishlatish: node tekshir.mjs <papka> <fayl.js>...
// papka — package.json turgan joy; fayllar — ishlaydigan kod
import { readFileSync } from "node:fs";
import { join } from "node:path";
import { checkImports, findImports } from "./bogliqlik.mjs";

const [dir, ...files] = process.argv.slice(2);
const pkgText = readFileSync(join(dir, "package.json"), "utf8");
const pkg = JSON.parse(pkgText);
const specifiers = files.flatMap((file) =>
  findImports(readFileSync(join(dir, file), "utf8")),
);
const { ok, devOnly, missing } = checkImports(pkg, specifiers);

for (const name of ok) console.log(`✔ ${name}`);
for (const name of devOnly) {
  console.log(`✖ ${name} — faqat devDependencies da`);
}
for (const name of missing) {
  console.log(`✖ ${name} — package.json da yo'q`);
}
if (devOnly.length + missing.length > 0) process.exitCode = 1;

// bogliqlik.test.mjs — node --test bogliqlik.test.mjs
import { test } from "node:test";
import assert from "node:assert/strict";
import {
  packageName,
  findImports,
  checkImports,
} from "./bogliqlik.mjs";

test("paket nomini ajratish", () => {
  assert.equal(packageName("picocolors"), "picocolors");
  assert.equal(packageName("@eslint/js"), "@eslint/js");
  assert.equal(packageName("@eslint/js/config"), "@eslint/js");
  assert.equal(packageName("dayjs/locale/uz"), "dayjs");
  assert.equal(packageName("./narx.js"), null);
  assert.equal(packageName("node:fs"), null);
  assert.equal(packageName("fs"), null);
});

test("importlarni topish", () => {
  const code = [
    'import pc from "picocolors";',
    "import { a } from './a.js';",
    'import "dayjs/locale/uz";',
    'const m = await import("web-vitals");',
  ].join("\n");
  assert.deepEqual(findImports(code), [
    "picocolors",
    "./a.js",
    "dayjs/locale/uz",
    "web-vitals",
  ]);
});

test("bo'limlarga ajratish", () => {
  const pkg = {
    dependencies: { dayjs: "1.11.13" },
    devDependencies: { picocolors: "1.1.1", prettier: "3.9.9" },
  };
  const specifiers = [
    "picocolors",
    "dayjs/locale/uz",
    "node:fs",
    "chalk",
  ];
  assert.deepEqual(checkImports(pkg, specifiers), {
    ok: ["dayjs"],
    devOnly: ["picocolors"],
    missing: ["chalk"],
  });
  assert.deepEqual(checkImports({}, []), {
    ok: [],
    devOnly: [],
    missing: [],
  });
});

ℹ tests 3
ℹ pass 3
ℹ fail 0

node tekshir.mjs ../xato-tur chek.js
node tekshir.mjs ../bahor-chek chek.js

✖ picocolors — faqat devDependencies da
✔ picocolors

9. Real ishda

• Docker va server: production image'da npm ci --omit=dev — odatiy qadam. Bo'limdagi xato aynan shu yerda chiqadi, ko'pincha juma kuni kechqurun. Docker'ni keyingi qismlarda o'rganamiz.
• Kutubxona yozganda peerDependencies — eng muhim qaror: React komponentlari kutubxonasi react ni hech qachon dependencies ga yozmaydi.
• Zaiflik e'lon qilinganda overrides — tez, vaqtinchalik yamoq. Katta kompaniyalarda har override uchun izoh va muddat talab qilinadi.
• Intervyu: "dependencies va devDependencies farqi frontendda nima?", "peer nima va nega kerak?", "overrides qachon ishlatiladi?".

Xulosa

• dependencies — ishlayotgan kod import qiladiganlar; devDependencies — buyruq sifatida ishlaydigan asboblar. npm ci --omit=dev (yoki NODE_ENV=production) ikkinchisini o'rnatmaydi.
• Bo'limni ko'chirish — npm i -P / -D; oddiy npm i bo'limga tegmaydi.
• Frontendda bundler bo'limga qaramaydi — bo'lim kelishuv; vazifalar da web-vitals Vite kelganda dependencies ga o'tadi.
• peerDependencies — "mezbon loyihada shu bo'lsin"; npm 7+ ularni o'zi o'rnatadi; mos kelmasa — ERESOLVE. peerDependenciesMeta.optional — o'rnatilmasa ham mayli.
• optionalDependencies mos kelmagan tizimda jim o'tkaziladi (EBADPLATFORM o'rniga).
• overrides chuqurdagi versiyani majburlaydi: o'zgartirgach daraxtni qayta quring, zaif versiyaga majburlamang, $nom bilan to'qnashuvni yeching.

Keyingi dars: package.json III: scripts chuqur — pre/post skriptlar, argument uzatish va vazifalar ga bitta npm run check buyrug'i.

Manbalar

• npm Docs (v11): package.json — dependencies, devDependencies, peerDependencies, peerDependenciesMeta, optionalDependencies, overrides
• npm Docs (v11): config — omit, include, npm install
• npm blog: "Presenting v7.0.0 of the npm CLI" (2020-10-13) — peer bog'liqliklarni avtomatik o'rnatish
• create-vite 9.2.1 — template-react-ts/package.json, template-vanilla-ts/package.json (npm arxividan)