Bootstrap & Vite

Oficiálny sprievodca, ako zahrnúť a zbaliť CSS a JavaScript Bootstrapu do vášho projektu pomocou Vite.

Na tejto stránke

Chcete preskočiť na koniec? Stiahnite si zdrojový kód a pracovné demo pre túto príručku z úložiska twbs/examples . Môžete tiež otvoriť príklad v StackBlitz pre živé úpravy.

Nastaviť

Vytvárame projekt Vite s Bootstrapom od nuly, takže predtým, ako skutočne začneme, existujú určité predpoklady a prvé kroky. Táto príručka vyžaduje, aby ste mali nainštalovaný súbor Node.js a určitú znalosť terminálu.

Vytvorte priečinok projektu a nastavte npm. Vytvoríme my-projectpriečinok a inicializujeme npm s -yargumentom, aby nám nekládol všetky interaktívne otázky.
```
mkdir my-project && cd my-project
npm init -y
```
Nainštalujte Vite. Na rozdiel od nášho sprievodcu Webpack tu existuje iba jedna závislosť nástroja na zostavovanie. Zvykneme --save-devsignalizovať, že táto závislosť slúži len na vývojové použitie a nie na výrobu.
```
npm i --save-dev vite
```
Nainštalujte Bootstrap. Teraz môžeme nainštalovať Bootstrap. Nainštalujeme aj Popper, pretože naše rozbaľovacie ponuky, kontextové okná a popisy nástrojov závisia od toho, pokiaľ ide o ich umiestnenie. Ak tieto komponenty neplánujete používať, môžete tu Popper vynechať.
```
npm i --save bootstrap @popperjs/core
```
Nainštalujte ďalšiu závislosť. Okrem Vite a Bootstrap potrebujeme ďalšiu závislosť (Sass), aby sme správne importovali a zbalili CSS Bootstrapu.
```
npm i --save-dev sass
```

Teraz, keď máme nainštalované a nastavené všetky potrebné závislosti, môžeme začať vytvárať súbory projektu a importovať Bootstrap.

Štruktúra projektu

Už sme vytvorili my-projectpriečinok a inicializovali sme npm. Teraz vytvoríme aj náš srcpriečinok, šablónu so štýlmi a súbor JavaScript, aby sme doplnili štruktúru projektu. Spustite nasledujúce z my-project, alebo manuálne vytvorte štruktúru priečinkov a súborov zobrazenú nižšie.

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

Keď skončíte, váš kompletný projekt by mal vyzerať takto:

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

V tejto chvíli je všetko na správnom mieste, ale Vite nebude fungovať, pretože sme ešte nevyplnili naše vite.config.js.

Nakonfigurujte Vite

S nainštalovanými závislosťami a s priečinkom projektu pripraveným na spustenie kódovania môžeme teraz nakonfigurovať Vite a spustiť náš projekt lokálne.

Otvorte vite.config.jsvo svojom editore. Keďže je prázdny, budeme doň musieť pridať nejakú štandardnú konfiguráciu, aby sme mohli spustiť náš server. Táto časť konfigurácie hovorí Vite, aby hľadal JavaScript nášho projektu a ako by sa mal správať vývojový server (sťahovanie z srcpriečinka s hot reload).
```
const path = require('path')

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

Ďalej vyplníme src/index.html. Toto je stránka HTML, ktorú Vite načíta do prehliadača, aby využil pribalený CSS a JS, ktorý k nej pridáme v neskorších krokoch.

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

Zahŕňame tu trochu štýlu Bootstrap s div class="container"a <button>, aby sme videli, kedy Vite načíta CSS Bootstrapu.

Teraz potrebujeme skript npm na spustenie Vite. Otvorte package.jsona pridajte startskript zobrazený nižšie (testovací skript by ste už mali mať). Tento skript použijeme na spustenie nášho lokálneho servera Vite dev.
```
{
  // ...
  "scripts": {
    "start": "vite",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  // ...
}
```
A nakoniec môžeme začať Vite. Z my-projectpriečinka vo vašom termináli spustite tento novo pridaný skript npm:
```
npm start
```

V ďalšej a poslednej časti tejto príručky importujeme všetky CSS a JavaScript od Bootstrapu.

Importovať Bootstrap

Nastavte import Sass Bootstrapu v vite.config.js. Váš konfiguračný súbor je teraz kompletný a mal by zodpovedať úryvku nižšie. Jedinou novou časťou je resolvesekcia – používame ju na pridanie aliasu k našim zdrojovým súborom vo vnútri node_modules, aby bol import čo najjednoduchší.

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 importujme CSS Bootstrapu. src/scss/styles.scssAk chcete importovať všetky zdroje Sass Bootstrapu, pridajte nasledujúce .
```
// Import all of Bootstrap's CSS
@import "~bootstrap/scss/bootstrap";
```
Ak chcete, môžete tiež importovať naše šablóny štýlov jednotlivo. Podrobnosti nájdete v našich dokumentoch o importe Sass .
Ďalej načítame CSS a importujeme JavaScript Bootstrapu. Pridajte nasledujúce do src/js/main.js, aby ste načítali CSS a importovali všetky JS Bootstrap. Popper bude importovaný automaticky cez Bootstrap.
```
// Import our custom CSS
import '../scss/styles.scss'

// Import all of Bootstrap's JS
import * as bootstrap from 'bootstrap'
```
Doplnky JavaScript môžete podľa potreby importovať aj jednotlivo, aby ste znížili veľkosť balíkov:
```
import Alert from 'bootstrap/js/dist/alert';

// or, specify which plugins you need:
import { Tooltip, Toast, Popover } from 'bootstrap';
```
Prečítajte si naše dokumenty JavaScript , kde nájdete ďalšie informácie o tom, ako používať doplnky Bootstrap.
A hotovo! 🎉 S plne načítaným zdrojom Sass a JS Bootstrapu by váš lokálny vývojový server mal teraz vyzerať takto.

Teraz môžete začať pridávať komponenty Bootstrap, ktoré chcete použiť. Nezabudnite si pozrieť celý vzorový projekt Vite, kde nájdete informácie o tom, ako zahrnúť ďalšie vlastné Sass a optimalizovať svoju zostavu importovaním iba častí CSS a JS Bootstrapu, ktoré potrebujete.

Vidíte tu niečo nesprávne alebo neaktuálne? Otvorte problém na GitHub . Potrebujete pomoc pri riešení problémov? Vyhľadajte alebo začnite diskusiu na GitHub.