Bootstrap & Vite

Официјален водич за тоа како да ги вклучите и пакетите CSS и JavaScript на Bootstrap во вашиот проект користејќи Vite.

На оваа страница

Сакате да прескокнете до крај? Преземете го изворниот код и работната демо за овој водич од складиштето twbs/examps . Можете исто така да го отворите примерот во 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да го увезете целиот извор 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.