Bootstrap және Vite

Vite көме��імен жобаңызға Bootstrap CSS және JavaScript қосу және жинақтау туралы ресми нұсқаулық.

Бұл бетте

Соңына дейін өткізгіңіз келе ме? Бұл нұсқаулықтың бастапқы кодын және жұмыс демонстрациясын twbs/examples репозиторийінен жүктеп алыңыз . Сондай-ақ , мысалды тікелей өңдеу үшін StackBlitz бағдарламасында ашуға болады.

Орнату

Біз Bootstrap көмегімен Vite жобасын нөлден бастап жасап жатырмыз, сондықтан біз шынымен бастау үшін кейбір алғышарттар мен алдыңғы қадамдар бар. Бұл нұсқаулық сізден 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 сайтында іздеу немесе талқылауды бастау .