npx va npm create: paketni o'rnatmasdan ishga tushirish va loyiha yaratish

Qisqacha: npx nom buyruqni avval loyihaning node_modules/.bin idan, keyin npx keshidan qidiradi, topilmasa paketni registrdan yuklab bir marta ishga tushiradi. Paket nomi buyruq nomidan farq qilsa — npx -p paket buyruq. npm create vite aslida npx create-vite — create- bilan boshlangan paket loyiha shablonini yaratadi. @latest har safar boshqa versiya va boshqa kod degani, shuning uchun jiddiy ishda versiyani aniq yozing.

Bu darsda

• npx buyruqni qayerdan topishini va qachon yuklashini bilasiz.
• npx -p va npm exec bilan paket nomi va buyruq nomini farqlaysiz (npx tsc tuzog'i).
• npm create vite ni interaktivsiz, aniq versiya va shablon bilan ishga tushirasiz.
• create-* konvensiyasini va @latest xavfini tushuntirasiz.
• O'z create-bahor shablon yaratuvchingizni yozasiz.

Oldin bilishingiz kerak: npm'ga birinchi qadam, npm buyruqlari chuqur, package.json IV: kirish nuqtalari.

1. Nega bu kerak?

Sardor «Bahor» uchun yangi sayt boshlamoqchi. Internetda maslahat: npm create vite@latest. Buyruq ishladi, papka paydo bo'ldi. Lekin u nima qildi? Qaysi dastur yuklandi va kompyuterda ishga tushdi? Ertaga xuddi shu buyruq boshqa natija beradimi?

Ikkinchi voqea — 15-qismdan. Sardor TypeScript'ni o'rnatmasdan npx tsc --version yozdi va ekranda qizil yozuv ko'rdi: "Bu siz qidirgan tsc emas". npm'ga birinchi qadam darsida npx ni "o'rnatmasdan ishga tushirish" deb tanishgansiz. npm buyruqlari darsida uning keshini ko'rgansiz. Bugun uning ichki qoidalarini o'rganamiz.

Maslahat: Chiqishlar 2026-10-10 da Windows 11, Node 24.21.0, npm 11.19.0 va create-vite 9.2.1 bilan olingan. Yo'l boshi … bilan qisqartirilgan.

2. npx buyruqni qayerdan oladi

2.1 Uch joy

flowchart TD
  A["npx rimraf --version"] --> B{"loyihaning<br/>node_modules/.bin da bormi?"}
  B -- "ha" --> C["o'sha versiya ishlaydi"]
  B -- "yo'q" --> D{"npx keshida bormi?"}
  D -- "ha" --> E["keshdagisi ishlaydi"]
  D -- "yo'q" --> F["registrdan yuklab,<br/>keshga qo'yib, ishga tushiradi"]

Scripts darsidagi 06-skriptlar loyihasida rimraf 6.1.3 o'rnatilgan:

npx rimraf --version

6.1.3

Hech narsa yuklanmadi — node_modules/.bin/rimraf topildi. Bu npx ning eng ko'p ishlatiladigan holati: loyihadagi asbobni terminaldan chaqirish (npx prettier --check ., npx tsc).

2.2 Loyihadan tashqarida

Paket yo'q papkada npx uni registrdan oladi. Terminal (TTY) bo'lsa, avval so'raydi — npm'ga birinchi qadam darsidagi Ok to proceed? (y). Terminal bo'lmasa (CI, skript, chiqish faylga yo'naltirilgan), so'ramaydi va faqat ogohlantiradi:

npx cowsay@1.6.0 Salom

npm warn exec The following package was not found and will be installed: cowsay@1.6.0
 _______
< Salom >
 -------
        \   ^__^
         \  (oo)\_______
            (__)\       )\/\
                ||----w |
                ||     ||

"Bu paket topilmadi va o'rnatiladi". E'tibor bering: CI'da npx savol bermasdan begona kodni ishga tushiradi. Teskari himoya — --no-install ("yuklama"):

npx --no-install esbuild --version

npm error npx canceled due to missing packages and no YES option: ["esbuild@0.28.2"]

"Yetishmayotgan paketlar va YES ruxsati yo'qligi sababli npx bekor qilindi". Loyihadagi asbobni chaqiryapman, tasodifan registrdan yuklamasin — degan holat uchun.

Yuklanganlar npm cache npx ls da turadi (npm buyruqlari):

npm cache npx ls

44379210b14b9449: create-vite@9.2.1
d08dbff2f92d3e31: typescript@7.0.2
e3e1d528ee105f80: cowsay@1.6.0
fb70c7c2b2b13973: rimraf

rimraf versiyasiz — biz uni @versiya siz so'raganmiz. Bunday kesh vaqt o'tishi bilan eskiradi: npx keyingi safar registrdan yangisini tekshiradi.

Tekshirib ko'ring: vazifalar da Prettier 3.9.9 o'rnatilgan. Sardor u yerda npx prettier@3.8.0 --version yozdi. Qaysi versiya chiqadi?

2.3 Ishga tushirishdan oldin — tekshiring

npx yuklagan paket sizning kompyuteringizda, sizning huquqlaringiz bilan ishlaydi. Notanish paketni chaqirishdan oldin bir daqiqa ajrating. npm buyruqlari darsidagi npm view shu yerda ham asosiy asbob:

npm view create-vite@9.2.1 bin dependencies

{ 'create-vite': 'index.js', cva: 'index.js' }

Ikkinchi maydon umuman chiqmadi — create-vite ning bog'liqligi yo'q: hamma kod bitta paket ichida yig'ilgan. Bu yaxshi belgi: ishga tushadigan begona kod faqat bitta muallifniki.

Notanish paketda tekshiriladigan narsalar ro'yxati:

Bu odat bir daqiqa oladi, lekin npm'ga birinchi qadam darsidagi "o'xshash nom" hujumidan va keyingi darslardagi zararli versiyalardan himoya qiladi. To'liq ro'yxat va o'lchovlar — Paket tanlash va baholash darsida.

Tekshirib ko'ring: Malika Telegram'da maslahat ko'rdi: "npx bahor-tez-sayt — bir buyruqda tayyor sayt!". U nima qilishi kerak?

3. Paket nomi va buyruq nomi

3.1 npx tsc tuzog'i

npx X — "X paketini top va uning X buyrug'ini ishga tushir". Ko'pincha nomlar bir xil (rimraf paketida rimraf buyrug'i). Lekin har doim emas. TypeScript paketining nomi typescript, buyrug'i — tsc. tsc degan paket esa registrda boshqa narsa:

npm view tsc version description

version = '2.0.4'
description = 'A deprecated release of the TypeScript compiler'

"TypeScript kompilyatorining eskirgan nashri". Loyihada TypeScript yo'q bo'lsa, npx tsc --version aynan shuni yuklaydi:

npm warn deprecated tsc@2.0.4: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

…
                This is not the tsc command you are looking for

To get access to the TypeScript compiler, tsc, from the command line either:

- Use npm install typescript to first add TypeScript to your project before using npx
- Use yarn to avoid accidentally running code from un-installed packages

"Bu siz qidirgan tsc buyrug'i emas. TypeScript kompilyatoriga kirish uchun avval npm install typescript qiling". TypeScript jamoasi bu nomni ataylab egallab, foydalanuvchilarni ogohlantirmoqda. Boshqa nomda esa shu joyda zararli paket turishi mumkin edi — o'xshash nom hujumi.

3.2 -p: paket boshqa, buyruq boshqa

To'g'ri yo'l — paketni alohida aytish:

npx -p typescript@7.0.2 tsc --version

Version 7.0.2

-p (--package) — "shu paketni o'rnat", keyingi so'z — buyruq. Uzun yozuvi — npm exec:

npm exec --package=typescript@7.0.2 -- tsc --version

Version 7.0.2

npm exec va npx — bitta mexanizm (npm 7 dan beri). Farq — yozuvda: npm exec da buyruqqa bayroq berilsa, -- majburiy, aks holda npm bayroqni o'ziga oladi (scripts darsidagi -- qoidasi). 15-qismda npx tsc@… ni ishlatmaslik haqidagi ogohlantirish ham shu sabab: tsc@7.0.2 — tsc paketining versiyasi, u esa registrda yo'q (ETARGET).

Tekshirib ko'ring: @biomejs/biome paketining buyrug'i — biome. Uni o'rnatmasdan versiyasini qanday ko'rasiz?

4. npm create: loyiha shablonlari

4.1 Konvensiya

npm create (yoki uning egizagi npm init <nom>) — npx ning maxsus shakli. U nomga create- qo'shadi:

create-* paketlari — kichik CLI'lar: savollar beradi va papkaga shablon fayllarini yozadi. Ularning bin maydoni (kirish nuqtalari) — create-vite da ikkita buyruq: create-vite va qisqa cva.

4.2 Vite loyihasi — interaktivsiz

Terminalda npm create vite@latest savollar beradi: nom, freymvork, TypeScript. Savolsiz, aniq versiya va shablon bilan (--help dan: -t — --template ning qisqasi, --no-immediate — "o'rnatib, dev serverni ishga tushirma"):

npm create vite@9.2.1 bahor-sayt -- -t vanilla-ts --no-immediate

> npx
> create-vite bahor-sayt -t vanilla-ts --no-immediate

│
◇  Scaffolding project in …\kurs\mashqlar\16\11-npx\bahor-sayt...
│
└  Done. Now run:

  cd bahor-sayt
  npm install
  npm run dev

"Loyiha karkasi yaratilmoqda… Tayyor". > npx qatori sirni ochadi: npm create aslida npx create-vite … ni chaqirdi. Yaratilgan fayllar:

bahor-sayt/.gitignore
bahor-sayt/index.html
bahor-sayt/package.json
bahor-sayt/public/favicon.svg
bahor-sayt/public/icons.svg
bahor-sayt/src/assets/hero.png
bahor-sayt/src/assets/typescript.svg
bahor-sayt/src/assets/vite.svg
bahor-sayt/src/counter.ts
bahor-sayt/src/main.ts
bahor-sayt/src/style.css
bahor-sayt/tsconfig.json

node_modules yo'q — shablon faqat fayllarni yozadi, o'rnatish sizning ishingiz. package.json dagi "version": "0.0.0" va "private": true ni pasport darsida ko'rgansiz. Bu loyihani Vite I darsida ishga tushiramiz.

4.3 Tuzoq: -- siz

-- ni unutsak:

npm create vite@9.2.1 b2 --template vanilla-ts --no-immediate

npm warn "vanilla-ts" is being parsed as a normal command line argument.
npm warn Unknown cli config "--template". This will stop working in the next major version of npm.
npm warn Unknown cli config "--immediate". This will stop working in the next major version of npm.

> npx
> create-vite b2 vanilla-ts
…

npm --template va --no-immediate ni o'ziga oldi va tashladi. create-vite ga faqat b2 vanilla-ts yetib bordi. Interaktivsiz rejimda u sukut bo'yicha shablon bilan baribir loyiha yaratdi — xato yo'q, faqat sariq ogohlantirishlar. Terminalda esa savollar chiqadi va siz "bayroqlar ishlamayapti" deb hayron qolasiz. Qoida o'sha: bayroqlar -- dan keyin.

5. @latest xavfi

npm create vite@latest — eng mashhur maslahat. @latest — "registrdagi latest tegi" (semver darsi):

npm view create-vite dist-tags

{ beta: '8.0.0-beta.0', latest: '9.2.1' }

Uchta muammo bor:

1. Takrorlanmaydi. Bugun 9.2.1, ertaga boshqa versiya va boshqa shablon. Darslik yoki README dagi ko'rsatma bir oydan keyin boshqa natija beradi. 2026-10-10 da shablon "vite": "^8.3.0" va "typescript": "~6.0.2" yozdi — keyingi versiya boshqasini yozishi mumkin.
2. Begona kod ishga tushadi. npx yuklagan paket sizning huquqlaringiz bilan ishlaydi: fayllarni o'qiydi, tarmoqqa chiqadi. @latest — "muallif kecha nima chiqargan bo'lsa, shuni ishga tushir". Muallifning akkaunti buzilsa, zararli versiya ham latest bo'ladi (Ta'minot zanjiri xavfsizligi).
3. Kesh aldaydi. Versiyasiz npx nom keshdagi eski nusxani ishlatishi mumkin — @latest aynan shuning uchun yoziladi. Lekin bu birinchi muammoni kuchaytiradi.

Amaliy qoida:

6. Boshqa menejerlarda

Jadval rasmiy hujjatlardan. dlx — "download and execute" (yuklab, ishga tushir). Muhim farq: pnpm dlx va yarn dlx loyihadagi .bin ga qaramaydi — har safar vaqtinchalik muhitga yuklaydi. Loyihadagi asbob uchun pnpm exec yoki yarn run. Ularni o'zimiz pnpm va Yarn va Bun darslarida o'rnatib sinaymiz.

7. Ko'p uchraydigan xatolar

8. Mashqlar

Mashqlar kurs/mashqlar/16/11-npx/ da.

1-mashq (oson): Qaysi paket ishga tushadi?

• npm create vite@9.2.1 → paket:
• npm init @eslint/config → paket:
• npx -p typescript tsc → paket:
• npx tsc (TypeScript o'rnatilmagan) → paket:

2-mashq (o'rta): Takrorlanadigan Vite loyihasi

bahor-sayt ni savolsiz yarating: create-vite 9.2.1, shablon vanilla-ts, o'rnatish va dev serversiz. Keyin npm pkg get devDependencies --prefix bahor-sayt bilan shablon yozgan versiyalarni ko'ring.

Yordam: --prefix papka — npm buyrug'ini boshqa papka uchun bajaradi (cd siz).

npm create vite@9.2.1 bahor-sayt -- -t vanilla-ts --no-immediate
npm pkg get devDependencies --prefix bahor-sayt

{
  "typescript": "~6.0.2",
  "vite": "^8.3.0"
}

3-mashq (qiyin): O'z create-bahor ingiz

«Bahor» filiallari uchun bir xil loyiha yaratadigan CLI yozing. create-bahor/ papkasida:

• shablon.js — makeFiles(name) → { "package.json": …, "menyu.js": …, ".gitignore": … } va isValidName(name) (kichik harf, raqam, -, _; birinchi belgi harf yoki raqam).
• index.js — #!/usr/bin/env node; nom noto'g'ri yoki papka bor bo'lsa — xabar va process.exit(1); aks holda papka va fayllarni yaratadi.
• package.json — bin: { "create-bahor": "./index.js" }, files.
• shablon.test.js — kamida 2 test.

Registrga chiqarmasdan sinash: npm exec --yes --package=<create-bahor papkasi> -- create-bahor bahor-kassa. Registrda bo'lganida bu npm create bahor bahor-kassa bo'lardi.

Ishoralar: bin — kirish nuqtalari; nom qoidalari — pasport darsi; mkdirSync, writeFileSync, existsSync — node:fs dan.

// shablon.js — yangi loyiha fayllari: { "yo'l": "matn" }
export function makeFiles(name) {
  const pkg = {
    name,
    version: "0.0.0",
    private: true,
    type: "module",
    scripts: { start: "node menyu.js" },
  };
  const menu = [
    "// menyu.js — «Bahor» menyusi",
    'const menu = { osh: 35000, "ko\'k choy": 5000 };',
    "",
    "for (const [dish, price] of Object.entries(menu)) {",
    "  console.log(`${dish}: ${price} so'm`);",
    "}",
    "",
  ].join("\n");
  return {
    "package.json": JSON.stringify(pkg, null, 2) + "\n",
    "menyu.js": menu,
    ".gitignore": "node_modules\n",
  };
}

// npm nomi qoidasi (soddalashtirilgan): kichik harf, raqam, - va _
export function isValidName(name) {
  return /^[a-z0-9][a-z0-9_-]*$/.test(name) && name.length <= 214;
}

console.log(Object.keys(makeFiles("bahor-kassa")));
console.log(isValidName("Bahor")); // false

[ 'package.json', 'menyu.js', '.gitignore' ]
false

#!/usr/bin/env node
// index.js — ishlatish: npm create bahor <papka>
import { existsSync, mkdirSync, writeFileSync } from "node:fs";
import { join } from "node:path";
import { isValidName, makeFiles } from "./shablon.js";

const name = process.argv[2];
if (!name || !isValidName(name)) {
  console.error("✖ Papka nomi kerak: kichik harf, raqam, - yoki _");
  process.exit(1);
}
if (existsSync(name)) {
  console.error(`✖ "${name}" papkasi allaqachon bor`);
  process.exit(1);
}

mkdirSync(name);
for (const [file, text] of Object.entries(makeFiles(name))) {
  writeFileSync(join(name, file), text);
}
console.log(`✔ ${name} tayyor. Endi:\n  cd ${name}\n  npm start`);

{
  "name": "create-bahor",
  "version": "1.0.0",
  "type": "module",
  "bin": {
    "create-bahor": "./index.js"
  },
  "files": [
    "index.js",
    "shablon.js"
  ]
}

npm exec --yes --package=../create-bahor -- create-bahor bahor-kassa
cd bahor-kassa
npm start

✔ bahor-kassa tayyor. Endi:
  cd bahor-kassa
  npm start

> bahor-kassa@0.0.0 start
> node menyu.js

osh: 35000 so'm
ko'k choy: 5000 so'm

9. Real ishda

• Yangi loyiha deyarli doim npm create … bilan boshlanadi: Vite, Astro, Next.js (create-next-app), Vue (create-vue). Avval --help ni o'qing — interaktivsiz bayroqlar CI va hujjat uchun kerak.
• Jamoa ko'rsatmalarida versiya aniq yoziladi: "npm create vite@9.2.1", "npx -p typescript@7.0.2 tsc".
• Kompaniyalar o'z create-* paketlarini yozadi: bir xil ESLint, Prettier, CI sozlamalari bilan yangi xizmat bir buyruqda.
• Intervyu: "npx paketni qayerdan oladi?", "npm create vite qaysi paketni ishga tushiradi?", "nega @latest CI'da xavfli?".

Xulosa

• npx tartibi: loyihaning .bin → npx keshi → registrdan yuklash; TTY'siz u so'ramaydi.
• npx X — "X paketining X buyrug'i"; nomlar farq qilsa — npx -p paket buyruq yoki npm exec --package=… -- ….
• npm create nom = npx create-nom; @scope/nom → @scope/create-nom; bayroqlar -- dan keyin.
• @latest — takrorlanmaydi va har safar yangi begona kodni ishga tushiradi; aniq versiya yozing.
• Doimiy asbob — devDependencies da; npx — bir martalik ish yoki loyihadagi asbobni chaqirish uchun.

Keyingi dars: .npmrc va registry sozlamalari — npm xulqini loyiha darajasida sozlash: save-exact, engine-strict, scope registrlari va token'ni xavfsiz saqlash.

Manbalar

• npm Docs (v11): npx, npm exec, npm init / create
• Vite: Scaffolding Your First Vite Project; create-vite --help (9.2.1)
• pnpm: pnpm dlx; Yarn: yarn dlx; Bun: bunx