Bootstrap i Vite

Oficjalny przewodnik dotyczący dołączania i dołączania CSS i JavaScript Bootstrap do projektu za pomocą Vite.

Na tej stronie

Chcesz przejść do końca? Pobierz kod źródłowy i działające demo tego przewodnika z repozytorium twbs/examples . Możesz także otworzyć przykład w StackBlitz do edycji na żywo.

Organizować coś

Budujemy projekt Vite za pomocą Bootstrap od podstaw, więc jest kilka warunków wstępnych i kroków, zanim naprawdę możemy zacząć. Ten przewodnik wymaga zainstalowania Node.js i pewnej znajomości terminala.

Utwórz folder projektu i ustaw npm. Utworzymy my-projectfolder i zainicjujemy npm z -yargumentem, aby uniknąć zadawania nam wszystkich interaktywnych pytań.
```
mkdir my-project && cd my-project
npm init -y
```
Zainstaluj Vite. W przeciwieństwie do naszego przewodnika po pakietach internetowych, istnieje tutaj tylko jedna zależność narzędzia do kompilacji. Używamy --save-dev, aby zasygnalizować, że ta zależność jest przeznaczona tylko do użytku programistycznego, a nie produkcyjnego.
```
npm i --save-dev vite
```
Zainstaluj Bootstrap. Teraz możemy zainstalować Bootstrap. Zainstalujemy również Poppera, ponieważ nasze listy rozwijane, popovery i podpowiedzi zależą od tego w celu ich pozycjonowania. Jeśli nie planujesz używać tych komponentów, możesz pominąć tutaj Poppera.
```
npm i --save bootstrap @popperjs/core
```
Zainstaluj dodatkową zależność. Oprócz Vite i Bootstrap potrzebujemy innej zależności (Sass), aby poprawnie zaimportować i połączyć CSS Bootstrap.
```
npm i --save-dev sass
```

Teraz, gdy mamy już zainstalowane i skonfigurowane wszystkie niezbędne zależności, możemy zabrać się do pracy nad tworzeniem plików projektu i importowaniem Bootstrapa.

Struktura projektu

Stworzyliśmy już my-projectfolder i zainicjalizowaliśmy npm. Teraz utworzymy również nasz srcfolder, arkusz stylów i plik JavaScript, aby dopełnić strukturę projektu. Uruchom następujące polecenie my-projectlub ręcznie utwórz folder i strukturę plików pokazaną poniżej.

mkdir {src,src/js,src/scss}
touch src/index.html src/js/main.js src/scss/styles.scss vite.config.js

Kiedy skończysz, Twój kompletny projekt powinien wyglądać tak:

my-project/
├── src/
│   ├── js/
│   │   └── main.js
│   └── scss/
│   |   └── styles.scss
|   └── index.html
├── package-lock.json
├── package.json
└── vite.config.js

W tym momencie wszystko jest na swoim miejscu, ale Vite nie zadziała, ponieważ nie wypełniliśmy vite.config.jsjeszcze naszego.

Skonfiguruj Vite

Mając zainstalowane zależności i nasz folder projektu gotowy do rozpoczęcia kodowania, możemy teraz skonfigurować Vite i uruchomić nasz projekt lokalnie.

Otwórz vite.config.jsw swoim edytorze. Ponieważ jest pusta, będziemy musieli dodać do niego trochę konfiguracji standardowej, abyśmy mogli uruchomić nasz serwer. Ta część konfiguracji mówi, że Vite miał szukać JavaScript naszego projektu i jak powinien zachowywać się serwer deweloperski (wyciągając z srcfolderu z hot reload).
```
const path = require('path')

export default {
  root: path.resolve(__dirname, 'src'),
  server: {
    port: 8080,
    hot: true
  }
}
```

Następnie wypełniamy src/index.html. To jest strona HTML, którą Vite załaduje w przeglądarce, aby wykorzystać dołączone CSS i JS, które dodamy do niej w późniejszych krokach.

<!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>

Dołączamy tutaj trochę stylu Bootstrap z div class="container"i <button>tak, że widzimy, kiedy CSS Bootstrap jest ładowany przez Vite.

Teraz potrzebujemy skryptu npm do uruchomienia Vite. Otwórz package.jsoni dodaj poniższy startskrypt (powinieneś już mieć skrypt testowy). Użyjemy tego skryptu, aby uruchomić nasz lokalny serwer deweloperski Vite.
```
{
  // ...
  "scripts": {
    "start": "vite",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  // ...
}
```
I wreszcie możemy uruchomić Vite. Z my-projectfolderu w terminalu uruchom nowo dodany skrypt npm:
```
npm start
```

W następnej i ostatniej sekcji tego przewodnika zaimportujemy wszystkie CSS i JavaScript Bootstrap.

Importuj Bootstrap

Skonfiguruj import Sass Bootstrap w vite.config.js. Twój plik konfiguracyjny jest teraz gotowy i powinien pasować do poniższego fragmentu. Jedyną nową częścią jest tutaj resolvesekcja — używamy jej, aby dodać alias do naszych plików źródłowych w środku node_modules, aby importowanie było tak proste, jak to możliwe.
```
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
  }
}
```
Teraz zaimportujmy CSS Bootstrapa. Dodaj poniższe do, src/scss/styles.scssaby zaimportować wszystkie źródła Sass Bootstrapa.
```
// Import all of Bootstrap's CSS
@import "~bootstrap/scss/bootstrap";
```
Możesz również importować nasze arkusze stylów indywidualnie, jeśli chcesz. Przeczytaj nasze dokumenty dotyczące importu Sass , aby uzyskać szczegółowe informacje.
Następnie ładujemy CSS i importujemy JavaScript z Bootstrapa. Dodaj następujące elementy, src/js/main.jsaby załadować CSS i zaimportować wszystkie pliki JS Bootstrap. Popper zostanie zaimportowany automatycznie przez Bootstrap.
```
// Import our custom CSS
import '../scss/styles.scss'

// Import all of Bootstrap's JS
import * as bootstrap from 'bootstrap'
```
W razie potrzeby możesz również importować wtyczki JavaScript pojedynczo, aby zmniejszyć rozmiary pakietów:
```
import Alert from 'bootstrap/js/dist/alert';

// or, specify which plugins you need:
import { Tooltip, Toast, Popover } from 'bootstrap';
```
Przeczytaj naszą dokumentację JavaScript , aby uzyskać więcej informacji na temat korzystania z wtyczek Bootstrap.
I jesteś skończony! 🎉 Po pełnym załadowaniu źródeł Sass i JS Bootstrapa, lokalny serwer programistyczny powinien teraz wyglądać tak.

Teraz możesz zacząć dodawać dowolne komponenty Bootstrap, których chcesz użyć. Koniecznie sprawdź kompletny przykładowy projekt Vite, aby dowiedzieć się, jak dodać dodatkowy niestandardowy Sass i zoptymalizować swoją kompilację, importując tylko te części CSS i JS Bootstrap, których potrzebujesz.

Widzisz tutaj coś złego lub nieaktualnego? Otwórz zgłoszenie w serwisie GitHub . Potrzebujesz pomocy w rozwiązywaniu problemów? Wyszukaj lub rozpocznij dyskusję na GitHub.