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"and <button>, щоб ми могли бачити, коли Vite завантажує CSS Bootstrap.

Тепер нам потрібен скрипт 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.