Bootstrap & Vite

Vite аркылуу долбооруңузга Bootstrap'тин CSS жана JavaScriptти кантип кошуу жана топтоо боюнча расмий жол.

Бул бетте

Аягына чейин өткүңүз келеби? Бул колдонмонун баштапкы кодун жана жумушчу демонстрациясын twbs/examples репозиторийинен жүктөп алыңыз . Ошондой эле түз түзөтүү үчүн мисалды StackBlitzте ачсаңыз болот.

Жайгашуу

Биз Vite долбоорун нөлдөн баштап Bootstrap менен куруп жатабыз, андыктан чындап баштоого чейин кээ бир өбөлгөлөр жана алдыңкы кадамдар бар. Бул колдонмо сизден Node.js орнотулган болушун жана терминал менен бир аз тааныш болушун талап кылат.

Долбоор папкасын түзүп, npm орнотуңуз. Биз папканы түзүп, бардык интерактивдүү суроолорду бербөө үчүн аргумент my-projectменен npm инициализациялайбыз .-y
```
mkdir my-project && cd my-project
npm init -y
```
Vite орнотуу. Биздин Webpack колдонмосунан айырмаланып, бул жерде бир гана куруу куралына көз карандылык бар. Биз --save-devбул көз карандылык өндүрүш үчүн эмес, өнүктүрүү үчүн гана экенин белгилөө үчүн колдонобуз.
```
npm i --save-dev vite
```
Bootstrap орнотуу.Эми биз Bootstrap орното алабыз. Попперди да орнотобуз, анткени биздин ачылуучу тизмелерибиз, попоперлерибиз жана кеңештерибиз алардын жайгашуусуна көз каранды. Эгер сиз ал компоненттерди колдонууну пландабасаңыз, анда Попперди бул жерден калтырсаңыз болот.
```
npm i --save bootstrap @popperjs/core
```
Кошумча көз карандылыкты орнотуу. Vite жана Bootstrap'тен тышкары, Bootstrap'тин CSS'ин туура импорттоо жана топтоо үчүн бизге дагы бир көз карандылык (Sass) керек.
```
npm i --save-dev sass
```

Эми бизде бардык керектүү көз карандылыктар орнотулуп, орнотулгандан кийин, биз долбоордун файлдарын түзүү жана Bootstrap импорттоо менен иштей алабыз.

Долбоордун структурасы

Биз my-projectпапканы мурунтан түзүп, npm инициализациялаганбыз. srcЭми долбоордун түзүмүн толуктоо үчүн папкабызды, стилдер жадыбалыбызды жана JavaScript файлыбызды түзөбүз . Төмөнкүлөрдү иштетиңиз my-projectже төмөндө көрсөтүлгөн папканы жана файл түзүмүн кол менен түзүңүз.

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

Бүткөндөн кийин, толук долбооруңуз төмөнкүдөй болушу керек:

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

Бул учурда, баары өз ордунда, бирок Vite иштебейт, анткени биз али толтура vite.config.jsэлекпиз.

Vite конфигурациялоо

Көз карандылык орнотулуп, долбоор папкабыз коддоону баштоого даяр болгондо, биз Viteди конфигурациялап, долбоорубузду жергиликтүү түрдө иштете алабыз.

Редакторуңузда ачыңыз vite.config.js. Ал бош болгондуктан, серверибизди иштетишибиз үчүн ага кандайдыр бир казан конфигурациясын кошушубуз керек болот. Конфигурациянын бул бөлүгү Viteге биздин долбоордун JavaScript'ин жана иштеп чыгуу сервери кандай иш алып барышы керектигин ( srcысык кайра жүктөө менен папкадан тартып алуу) издеши керектигин айтат.
```
const path = require('path')

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

Кийинки биз толтурабыз src/index.html. Бул CSS жана JSти колдонуу үчүн Vite браузерге жүктөй турган HTML баракчасы, биз ага кийинки кадамдарда кошобуз.

<!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 стилин бир аз кошуп жатабыз div class="container"жана <button>Bootstrap CSS качан Vite жүктөгөнүн көрөбүз.

Эми Viteди иштетүү үчүн бизге npm скрипт керек. Төмөндө көрсөтүлгөн скриптти ачып package.json, кошуңуз start(сизде тест скрипт болушу керек). Бул скриптти жергиликтүү Vite dev серверибизди баштоо үчүн колдонобуз.
```
{
  // ...
  "scripts": {
    "start": "vite",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  // ...
}
```
Акыр-аягы, биз Vite баштаса болот. my-projectТерминалыңыздагы папкадан жаңы кошулган npm скриптин иштетиңиз :
```
npm start
```

Бул колдонмонун кийинки жана акыркы бөлүмүндө биз Bootstrapтын бардык CSS жана JavaScriptтерин импорттойбуз.

Bootstrap импорттоо

Bootstrap'тин Sass импортун орнотуңуз vite.config.js. Конфигурация файлыңыз азыр аяктады жана төмөнкү үзүндүгө дал келиши керек. Бул жерде бир гана жаңы бөлүк - бул бөлүм — биз муну импортту мүмкүн болушунча жөнөкөй сактоо үчүн resolveичиндеги баштапкы файлдарыбызга лакап ат кошуу үчүн колдонобуз .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
  }
}
```
Эми, келгиле, Bootstrap CSS импорттойлу. src/scss/styles.scssБардык Bootstrap булагы Sass импорттоо үчүн төмөнкүнү кошуңуз .
```
// Import all of Bootstrap's CSS
@import "~bootstrap/scss/bootstrap";
```
Кааласаңыз, стилдер жадыбалыбызды өз алдынча импорттой аласыз. Sass импорттук документтерибизди окуңуз .
Андан кийин биз CSSти жүктөйбүз жана Bootstrap'тин JavaScript'ин импорттойбуз. src/js/main.jsCSSти жүктөө жана бардык Bootstrap'тин JS импорттоо үчүн төмөнкүнү кошуңуз . Поппер автоматтык түрдө Bootstrap аркылуу импорттолот.
```
// Import our custom CSS
import '../scss/styles.scss'

// Import all of Bootstrap's JS
import * as bootstrap from 'bootstrap'
```
Топтомдун өлчөмүн азайтуу үчүн JavaScript плагиндерин жекече импорттой аласыз:
```
import Alert from 'bootstrap/js/dist/alert';

// or, specify which plugins you need:
import { Tooltip, Toast, Popover } from 'bootstrap';
```
Bootstrap плагиндерин кантип колдонуу керектиги жөнүндө көбүрөөк маалымат алуу үчүн биздин JavaScript документтерибизди окуңуз .
А сен бүттүң! 🎉 Bootstrap булагы Sass жана JS толук жүктөлгөндө, сиздин жергиликтүү өнүктүрүү сервериңиз азыр ушундай болушу керек.

Эми сиз колдонгуңуз келген каалаган Bootstrap компоненттерин кошо баштасаңыз болот. Кошумча ыңгайлаштырылган Sass кошуу жана Bootstrap'тын CSS жана JS бөлүктөрүн гана импорттоо менен түзүлүшүңүздү оптималдаштыруу үчүн Vite мисалы долбоорун толугу менен текшериңиз.

Бул жерден туура эмес же эскирип калган нерсени көрүп жатасызбы? Сураныч , GitHubда маселени ачыңыз . Мүчүлүштүктөрдү аныктоого жардам керекпи? GitHub'да издеңиз же талкуу баштаңыз .