Bootstrap і Vite

Афіцыйнае к��раўніцтва аб тым, як уключыць і аб'яднаць CSS і JavaScript Bootstrap у ваш праект з дапамогай Vite.

На гэтай старонцы

Хочаце прапусціць да канца? Спампуйце зыходны код і рабочую дэманстрацыю гэтага кіраўніцтва з рэпазітара 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. Мы таксама ўсталюем Popper, паколькі нашы выпадаючыя спісы, усплывальныя вокны і падказкі залежаць ад яго для іх размяшчэння. Калі вы не плануеце выкарыстоўваць гэтыя кампаненты, вы можаце прапусціць Popper тут.
```
npm i --save bootstrap @popperjs/core
```
Усталюйце дадатковую залежнасць. У дадатак да Vite і Bootstrap нам патрэбна яшчэ адна залежнасць (Sass), каб належным чынам імпартаваць і звязваць CSS Bootstrap.
```
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. Гэта HTML-старонка, якую Vite будзе загружаць у браўзер, каб выкарыстоўваць уключаныя CSS і JS, якія мы дадамо да яе на наступных этапах.

<!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>, каб мы бачылі, калі CSS Bootstrap загружаецца Vite.

Цяпер нам патрэбен скрыпт npm для запуску Vite. Адкрыйце package.jsonі дадайце startскрыпт, паказаны ніжэй (у вас ужо павінен быць тэставы скрыпт). Мы будзем выкарыстоўваць гэты скрыпт для запуску лакальнага сервера Vite dev.
```
{
  // ...
  "scripts": {
    "start": "vite",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  // ...
}
```
І, нарэшце, мы можам пачаць Vite. З my-projectпапкі ў вашым тэрмінале запусціце нядаўна дададзены скрыпт npm:
```
npm start
```

У наступным і апошнім раздзеле гэтага кіраўніцтва мы імпартуем увесь CSS і JavaScript Bootstrap.

Імпарт Bootstrap

Наладзьце імпарт Sass Bootstrap у 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
  }
}
```
Зараз давайце імпартуем CSS Bootstrap. Дадайце наступнае, src/scss/styles.scssкаб імпартаваць увесь зыходны код Bootstrap Sass.
```
// Import all of Bootstrap's CSS
@import "~bootstrap/scss/bootstrap";
```
Вы таксама можаце імпартаваць нашы табліцы стыляў паасобку, калі хочаце. Прачытайце нашу дакументацыю па імпарту Sass для атрымання падрабязнай інфармацыі.
Далей мы загружаем CSS і імпартуем JavaScript Bootstrap. Дадайце наступнае, src/js/main.jsкаб загрузіць CSS і імпартаваць увесь JS Bootstrap. Popper будзе аўтаматычна імпартаваны праз 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';
```
Прачытайце нашу дакументацыю па JavaScript для атрымання дадатковай інфармацыі аб тым, як выкарыстоўваць убудовы Bootstrap.
І гатова! 🎉 Калі зыходныя коды Bootstrap Sass і JS цалкам загружаны, ваш лакальны сервер распрацоўкі цяпер павінен выглядаць так.

Цяпер вы можаце пачаць дадаваць любыя кампаненты Bootstrap, якія хочаце выкарыстоўваць. Абавязкова азнаёмцеся з поўным прыкладам праекта Vite , каб даведацца , як уключыць дадатковы карыстальніцкі Sass і аптымізаваць зборку, імпартуючы толькі тыя часткі CSS і JS Bootstrap, якія вам патрэбныя.

Бачыце тут штосьці не так ці састарэлае? Адкрыйце пытанне на GitHub . Патрэбна дапамога па ліквідацыі непаладак? Шукайце або пачынайце абмеркаванне на GitHub.