# JavaScript bundler va zamonaviy loyiha tuzilishi

> Bundler nima uchun kerak: npm va package.json, Vite bilan loyiha ochish, import turlari, build jarayoni va tree shaking. Amaliy qadamlar bilan.

Manba: https://learncode.uz/javascript/bundler/
Sana: 2026-06-08

[Modullar](https://learncode.uz/javascript/modullar) darsida `import` va `export` ni ko'rdik.
Haqiqiy loyihada esa yuzlab fayl, tashqi kutubxonalar va brauzer tushunmaydigan
sintaksis bo'ladi. Buni **bundler** hal qiladi.

## Muammo

Brauzerga o'nlab modulni to'g'ridan-to'g'ri berish uch muammo tug'diradi:

1. **Ko'p so'rov** — har `import` alohida tarmoq so'rovi;
2. **Tashqi paketlar** — `import _ from "lodash"` ni brauzer topa olmaydi
   (u faqat yo'l yoki URL tushunadi);
3. **Eski brauzerlar** — yangi sintaksisni qo'llab-quvvatlamasligi mumkin.

> **Atama**
>
> **Bundler** — loyihadagi barcha modul va kutubxonalarni o'qib, ularni
> brauzer uchun optimallashtirilgan bir necha faylga yig'adigan vosita.
> Bugungi keng tarqalgan tanlov — **Vite**; oldingi avlod — Webpack.

## npm va package.json

Har loyiha `package.json` bilan boshlanadi:

```bash
mkdir my-project
cd my-project
npm init -y
```

Natijada shunday fayl paydo bo'ladi:

```json
{
  "name": "my-project",
  "version": "1.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build"
  },
  "dependencies": {},
  "devDependencies": {}
}
```

Muhim maydonlar:

- `type: "module"` — `import`/`export` ishlatilishini bildiradi;
- `scripts` — `npm run dev` kabi buyruqlar;
- `dependencies` — ilova ishlashi uchun kerak paketlar;
- `devDependencies` — faqat ishlab chiqishda kerak (bundler, testlar).

## Paket o'rnatish

```bash
npm install lodash          # dependencies ga qo'shiladi
npm install -D vite         # devDependencies ga
npm install                 # package.json bo'yicha hammasini o'rnatadi
```

> **node_modules va lock fayl**
>
> `node_modules/` papkasi juda katta va **git'ga qo'shilmaydi** (`.gitignore`
> ga yoziladi). Uning o'rniga `package-lock.json` saqlanadi — u har paketning
> **aniq versiyasini** qayd qiladi, shuning uchun boshqa kompyuterda ham
> xuddi shu kod o'rnatiladi.

## Vite bilan loyiha

```bash
npm create vite@latest my-project
cd my-project
npm install
npm run dev
```

Odatiy tuzilma:

```
my-project/
├── index.html          ← kirish nuqtasi
├── package.json
├── vite.config.js
├── public/             ← o'zgarishsiz nusxalanadigan fayllar
└── src/
    ├── main.js         ← asosiy modul
    ├── style.css
    └── components/
```

`index.html` da bitta ulanish yetarli:

```html
<script type="module" src="/src/main.js"></script>
```

Qolgan barcha modullarni bundler o'zi topadi va yig'adi.

## Import turlari

```js
// Bu kod tushuntirish uchun — brauzerda import ishlamaydi,
// lekin sintaksisni eslatib turadi.

const examples = [
  'import { add } from "./calc.js";        // nisbiy yo‘l',
  'import _ from "lodash";                 // npm paketi',
  'import "./style.css";                   // CSS (bundler qo‘shadi)',
  'import logo from "./logo.png";          // rasm → URL',
  'const mod = await import("./heavy.js"); // dinamik import',
];

for (const m of examples) console.log(m);
```

Uchinchi va to'rtinchisi — bundler qo'shadigan imkoniyat: sof JavaScript'da
CSS yoki rasmni `import` qilib bo'lmaydi.

## Dinamik import — kerak bo'lganda yuklash

```js
// Butun kod boshida yuklanadi
import { ogirVosita } from "./heavy.js";

// Faqat kerak bo'lganda yuklanadi
button.addEventListener("click", async () => {
  const { ogirVosita } = await import("./heavy.js");
  ogirVosita();
});
```

Ikkinchi usul boshlang'ich yuklanishni tezlashtiradi — foydalanuvchi
ishlatmasa, kod umuman yuklanmaydi. Bu **code splitting** deb ataladi.

Natija [Promise](https://learncode.uz/javascript/promise) bo'lgani uchun `await` ishlatiladi.

## Build

```bash
npm run build
```

Bundler `dist/` papkasiga tayyor fayllarni chiqaradi va yo'l-yo'lakay:

- **birlashtiradi** — ko'p modul bir necha faylga;
- **minifikatsiya qiladi** — bo'sh joy, izoh va uzun nomlarni olib tashlaydi;
- **tree shaking** — ishlatilmagan kodni tashlab yuboradi;
- **hash qo'shadi** — `main.a1b2c3.js`, kesh yangilanishi uchun;
- **eski sintaksisga o'giradi** — kerak bo'lsa.

> **Atama**
>
> **Tree shaking** ("daraxtni silkitish") — modullardan faqat **haqiqatan
> ishlatilgan** eksportlarni olib qolish. Kutubxonadan bitta funksiya
> import qilinsa, qolgani natijaga tushmaydi.
>
> Bu faqat `import`/`export` bilan ishlaydi — eski `require` bilan emas.

## Nima uchun tez

Vite ishlab chiqish paytida kodni **yig'maydi**: brauzer modullarni
to'g'ridan-to'g'ri oladi, Vite esa faqat kerakli faylni o'zgartirib beradi.
Shuning uchun sahifa deyarli darhol yangilanadi (**HMR** — hot module
replacement).

Yig'ish esa faqat `build` paytida, bir marta bajariladi.

## Muhit o'zgaruvchilari

```js
// .env fayli:
// VITE_API_MANZIL=https://api.example.com

const address = import.meta.env.VITE_API_MANZIL;
console.log(import.meta.env.MODE);   // "development" yoki "production"
```

> **Maxfiy kalitlar frontendga tushmaydi**
>
> Brauzerga yuborilgan har qanday qiymatni foydalanuvchi ko'ra oladi. API
> kalitlari, parollar va tokenlar **faqat serverda** saqlanishi kerak — bundler
> buni yashira olmaydi.

## Asosiy vositalar

| Vosita | Vazifasi |
|---|---|
| **Vite** | Bundler va dev-server |
| **ESLint** | Kod xatolarini topish |
| **Prettier** | Formatlash |
| **Vitest** | Testlar |
| **TypeScript** | Turlarni tekshirish |

Bularning barchasi `devDependencies` ga o'rnatiladi va `scripts` orqali
ishga tushiriladi.

## Amaliy mashq

1. `npm init -y` bilan yangi loyiha yarating;
2. `package.json` dagi maydonlarni o'qib chiqing;
3. `npm create vite@latest` bilan loyiha yasang;
4. `npm run dev` ni ishga tushirib, faylni o'zgartiring — sahifa o'zi
   yangilanadimi?
5. `npm run build` qilib, `dist/` ichidagi fayllarni ko'ring;
6. dinamik `import()` yozib, tarmoq panelida qachon yuklanishini kuzating.

## Qisqacha xulosa

- **Bundler** modullarni brauzer uchun bitta yoki bir necha faylga yig'adi.
- `package.json` loyiha ta'rifi; `node_modules` git'ga qo'shilmaydi.
- `dependencies` — ilova uchun, `devDependencies` — ishlab chiqish uchun.
- Bundler CSS va rasmni ham `import` qilish imkonini beradi.
- **Dinamik import** kodni kerak bo'lganda yuklaydi (code splitting).
- **Tree shaking** ishlatilmagan kodni olib tashlaydi.
- Maxfiy kalitlar hech qachon frontend kodiga yozilmaydi.

Keyingi darsda [testlash](https://learncode.uz/javascript/testlash) — kodni avtomatik tekshirish.