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.
```
{
  // ...
  "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, за да импортирате целия изходен Sass на Bootstrap.
```
// 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.
И сте готови! 🎉 С напълно зареден Sass и JS източник на Bootstrap, вашият локален сървър за разработка вече трябва да изглежда така.

Сега можете да започнете да добавяте всички компоненти на Bootstrap, които искате да използвате. Не забравяйте да разгледате пълния примерен проект на Vite за това как да включите допълнителен персонализиран Sass и да оптимизирате компилацията си, като импортирате само частите от CSS и JS на Bootstrap, от които се нуждаете.

Виждате нещо нередно или остаряло тук? Моля , отворете проблем в GitHub . Нуждаете се от помощ за отстраняване на неизправности? Търсете или започнете дискусия в GitHub.