Bootstrap va Vite

Vite-dan foydalanib loyihangizga Bootstrap-ning CSS va JavaScript-ni qanday qo'shish va to'plash bo'yicha rasmiy qo'llanma.

Ushbu sahifada

Oxirigacha o'tishni xohlaysizmi? Ushbu qo'llanma uchun manba kodini va ish demosini twbs/examples omboridan yuklab oling . Jonli tahrirlash uchun StackBlitz-da misolni ham ochishingiz mumkin .

Sozlash; o'rnatish

Biz noldan boshlab Bootstrap bilan Vite loyihasini qurmoqdamiz, shuning uchun biz chindan ham boshlashimiz uchun ba'zi bir shartlar va oldingi qadamlar mavjud. Ushbu qo'llanma sizdan Node.js o'rnatilgan bo'lishi va terminal bilan biroz tanish bo'lishingizni talab qiladi.

Loyiha papkasini yarating va npm ni o'rnating. Biz papkani yaratamiz va barcha interaktiv savollarni bermaslik uchun argument my-projectbilan npm ni ishga tushiramiz.-y
```
mkdir my-project && cd my-project
npm init -y
```
Vite-ni o'rnating. Bizning Webpack qo'llanmamizdan farqli o'laroq, bu erda faqat bitta qurish vositasiga bog'liqlik mavjud. Biz --save-devushbu qaramlik ishlab chiqarish uchun emas, balki faqat ishlab chiqish uchun ekanligini bildirish uchun foydalanamiz.
```
npm i --save-dev vite
```
Bootstrap-ni o'rnating. Endi biz Bootstrap-ni o'rnatishimiz mumkin. Shuningdek, biz Popperni o'rnatamiz, chunki bizning ochiladigan menyular, popoverlar va maslahatlar ularning joylashishiga bog'liq. Agar siz ushbu komponentlardan foydalanishni rejalashtirmasangiz, bu erda Popperni qoldirishingiz mumkin.
```
npm i --save bootstrap @popperjs/core
```
Qo'shimcha qaramlikni o'rnating. Bootstrap CSS-ni to'g'ri import qilish va to'plash uchun Vite va Bootstrap-ga qo'shimcha ravishda bizga yana bir bog'liqlik (Sass) kerak.
```
npm i --save-dev sass
```

Endi bizda barcha kerakli bog'liqliklar o'rnatilgan va sozlangan, biz loyiha fayllarini yaratish va Bootstrap-ni import qilish bilan shug'ullanishimiz mumkin.

Loyiha tuzilishi

Biz allaqachon my-projectjildni yaratdik va npm ni ishga tushirdik. Endi biz srcloyiha tuzilmasini yaxlitlash uchun papkamiz, uslublar jadvali va JavaScript faylimizni ham yaratamiz. dan quyidagilarni ishga tushiring my-projectyoki quyida ko'rsatilgan papka va fayl strukturasini qo'lda yarating.

mkdir {src,src/js,src/scss}
touch src/index.html src/js/main.js src/scss/styles.scss vite.config.js

Ishingiz tugagach, to'liq loyihangiz quyidagicha ko'rinishi kerak:

my-project/
├── src/
│   ├── js/
│   │   └── main.js
│   └── scss/
│   |   └── styles.scss
|   └── index.html
├── package-lock.json
├── package.json
└── vite.config.js

Ayni paytda hamma narsa o'z joyida, lekin Vite ishlamaydi, chunki biz vite.config.jshali to'ldirmaganmiz.

Vite-ni sozlang

O'rnatilgan bog'liqliklar va loyiha papkamiz kodlashni boshlashimiz uchun tayyor bo'lsa, endi biz Vite-ni sozlashimiz va loyihamizni mahalliy sifatida ishga tushirishimiz mumkin.

Muharriringizda oching vite.config.js. U bo'sh bo'lgani uchun serverimizni ishga tushirishimiz uchun unga ba'zi qozon konfiguratsiyasini qo'shishimiz kerak bo'ladi. Konfiguratsiyaning ushbu qismi Vite-ga loyihamizning JavaScript-ni va ishlab chiqish serveri qanday harakat qilishini izlashi kerakligini aytadi ( srcqayta yuklangan papkadan tortib olish).
```
const path = require('path')

export default {
  root: path.resolve(__dirname, 'src'),
  server: {
    port: 8080,
    hot: true
  }
}
```

Keyin biz to'ldiramiz src/index.html. Bu to'plamdagi CSS va JS dan foydalanish uchun Vite brauzerga yuklaydigan HTML sahifasi, biz keyingi bosqichlarda unga qo'shamiz.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap w/ Vite</title>
  </head>
  <body>
    <div class="container py-4 px-3 mx-auto">
      <h1>Hello, Bootstrap and Vite!</h1>
      <button class="btn btn-primary">Primary button</button>
    </div>
    <script type="module" src="./js/main.js"></script>
  </body>
</html>

Bootstrap-ning CSS-ni Vite qachon yuklaganini ko'rishimiz uchun biz div class="container"bir oz Bootstrap uslubini qo'shmoqdamiz.<button>

Endi Vite-ni ishga tushirish uchun bizga npm skripti kerak. Quyida ko'rsatilgan skriptni oching package.jsonva qo'shing start(sizda allaqachon sinov skripti bo'lishi kerak). Mahalliy Vite dev serverimizni ishga tushirish uchun ushbu skriptdan foydalanamiz.
```
{
  // ...
  "scripts": {
    "start": "vite",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  // ...
}
```
Va nihoyat, biz Vite-ni boshlashimiz mumkin. my-projectTerminalingizdagi papkadan yangi qo'shilgan npm skriptini ishga tushiring :
```
npm start
```

Ushbu qo'llanmaning keyingi va oxirgi qismida biz barcha Bootstrap CSS va JavaScript-ni import qilamiz.

Bootstrap import

Bootstrap-ning Sass importini sozlang vite.config.js. Konfiguratsiya faylingiz tugallandi va u quyidagi parchaga mos kelishi kerak. Bu yerdagi yagona yangi qism bu boʻlimdir – biz importni iloji boricha soddalashtirish uchun resolveichki fayllarimizga taxallus qoʻshish uchun foydalanamiz .node_modules

const path = require('path')

export default {
  root: path.resolve(__dirname, 'src'),
  resolve: {
    alias: {
      '~bootstrap': path.resolve(__dirname, 'node_modules/bootstrap'),
    }
  },
  server: {
    port: 8080,
    hot: true
  }
}

Keling, Bootstrap CSS-ni import qilaylik. src/scss/styles.scssBootstrap-ning barcha Sass manbasini import qilish uchun quyidagilarni qo'shing .
```
// Import all of Bootstrap's CSS
@import "~bootstrap/scss/bootstrap";
```
Agar xohlasangiz, uslublar jadvallarini alohida import qilishingiz mumkin. Tafsilotlar uchun Sass import hujjatlarini o'qing .
Keyin biz CSS-ni yuklaymiz va Bootstrap-ning JavaScript-ni import qilamiz. src/js/main.jsCSS-ni yuklash va Bootstrap-ning barcha JS-larini import qilish uchun quyidagilarni qo'shing . Popper avtomatik ravishda Bootstrap orqali import qilinadi.
```
// Import our custom CSS
import '../scss/styles.scss'

// Import all of Bootstrap's JS
import * as bootstrap from 'bootstrap'
```
Toʻplam oʻlchamlarini kamaytirish uchun JavaScript plaginlarini alohida import qilishingiz mumkin:
```
import Alert from 'bootstrap/js/dist/alert';

// or, specify which plugins you need:
import { Tooltip, Toast, Popover } from 'bootstrap';
```
Bootstrap plaginlaridan qanday foydalanish haqida ko'proq ma'lumot olish uchun JavaScript hujjatlarini o'qing .
Va siz tugatdingiz! 🎉 Bootstrap manbasi Sass va JS toʻliq yuklangan boʻlsa, mahalliy ishlab chiqish serveringiz endi shunday koʻrinishi kerak.

Endi siz foydalanmoqchi bo'lgan har qanday Bootstrap komponentlarini qo'shishni boshlashingiz mumkin. Qo'shimcha maxsus Sassni qanday kiritish va faqat Bootstrap CSS va JS qismlarini import qilish orqali tuzilmangizni optimallashtirish haqida to'liq Vite misol loyihasini ko'rib chiqing.

Bu yerda notoʻgʻri yoki eskirgan narsani koʻrdingizmi? Iltimos , GitHub da muammoni oching . Muammolarni bartaraf etishda yordam kerakmi? GitHub-da qidiring yoki muhokama boshlang .