Bootstrap va posilka

Parcel yordamida 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 . Siz misolni StackBlitz-da ham ochishingiz mumkin, lekin uni ishga tushirmaysiz, chunki u yerda Parcel hozircha qo'llab-quvvatlanmaydi.

Sozlash; o'rnatish

Biz noldan boshlab Bootstrap bilan Parcel 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
```
Parselni o'rnating. Bizning Webpack qo'llanmamizdan farqli o'laroq, bu erda faqat bitta qurish vositasiga bog'liqlik mavjud. Parcel avtomatik ravishda til transformatorlarini (masalan, Sass) aniqlaganda o'rnatadi. Biz --save-devushbu qaramlik ishlab chiqarish uchun emas, balki faqat ishlab chiqish uchun ekanligini bildirish uchun foydalanamiz.
```
npm i --save-dev parcel
```
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
```

Endi bizda barcha kerakli bog'liqliklar o'rnatilgan bo'lsa, biz loyiha fayllarini yaratish va Bootstrap-ni import qilishni boshlashimiz 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

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

Ayni paytda hamma narsa joyida, lekin serverimizni ishga tushirish uchun Parcelga HTML sahifasi va npm skripti kerak.

Parselni sozlang

O'rnatilgan bog'liqliklar va loyiha papkamiz kodlashni boshlashimiz uchun tayyor bo'lsa, endi biz Parcelni sozlashimiz va loyihamizni mahalliy sifatida ishga tushirishimiz mumkin. Parselning o'zi dizayni bo'yicha konfiguratsiya faylini talab qilmaydi, lekin serverimizni ishga tushirish uchun bizga npm skripti va HTML fayli kerak.

src/index.htmlFaylni to'ldiring . Parcelga ko'rsatish uchun sahifa kerak, shuning uchun biz sahifamizdan index.htmlba'zi bir asosiy HTML-ni, jumladan, CSS va JavaScript fayllarimizni sozlash uchun foydalanamiz.
```
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap w/ Parcel</title>
    <link rel="stylesheet" href="scss/styles.scss">
    <script type="module" src="js/main.js"></script>
  </head>
  <body>
    <div class="container py-4 px-3 mx-auto">
      <h1>Hello, Bootstrap and Parcel!</h1>
      <button class="btn btn-primary">Primary button</button>
    </div>
  </body>
</html>
```
div class="container"Bootstrap-ning CSS-ni qachon Webpack tomonidan yuklanganligini ko'rishimiz uchun <button>biz bu erda bir oz Bootstrap uslubini qo'shmoqdamiz.

Parcel avtomatik ravishda biz Sass ishlatayotganimizni aniqlaydi va uni qo‘llab-quvvatlash uchun Sass Parcel plaginini o‘rnatadi . Biroq, agar xohlasangiz, qo'lda ham ishga tushirishingiz mumkin npm i --save-dev @parcel/transformer-sass.
Parcel npm skriptlarini qo'shing. ni oching va ob'ektga package.jsonquyidagi startskriptni qo'shing. scriptsBiz ushbu skriptdan Parcel ishlab chiqish serverimizni ishga tushirish va distkatalogga kompilyatsiya qilingandan so'ng biz yaratgan HTML faylni ko'rsatish uchun foydalanamiz.
```
{
   // ...
   "scripts": {
     "start": "parcel serve src/index.html --public-url / --dist-dir dist",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   // ...
}
```
Va nihoyat, biz Parselni 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-ni Parcel-ga import qilish ikkita importni talab qiladi, biri bizning styles.scssva ikkinchisi main.js.

Bootstrap CSS-ni import qiling. 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 .
Bootstrap's JS import. src/js/main.jsBootstrap-ning barcha JS-larini import qilish uchun quyidagilarni qo'shing . Popper avtomatik ravishda Bootstrap orqali import qilinadi.
```
// 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 Sass -ni qanday kiritish va faqat Bootstrap-ning CSS va JS-ning kerakli qismlarini import qilish orqali qurilishingizni optimallashtirish uchun to'liq Parcel 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 .