JavaScript bundler va zamonaviy loyiha tuzilishi

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.

npm va package.json

Har loyiha package.json bilan boshlanadi:

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

Natijada shunday fayl paydo bo’ladi:

{
  "name": "mening-loyiham",
  "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

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

Vite bilan loyiha

npm create vite@latest mening-loyiham
cd mening-loyiham
npm install
npm run dev

Odatiy tuzilma:

mening-loyiham/
├── 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:

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

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

Import turlari

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

Dinamik import — kerak bo’lganda yuklash

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

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

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

Natija Promise bo’lgani uchun await ishlatiladi.

Build

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.

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

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

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

Asosiy vositalar

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 — kodni avtomatik tekshirish.