Bootstrap & Parcel

Oficiálna príručka, ako zahrnúť a zbaliť CSS a JavaScript Bootstrapu do vášho projektu pomocou balíka.

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 , ale nespustiť ho, pretože Parcel tam momentálne nie je podporovaný.

Nastaviť

Budujeme Parcelový projekt s Bootstrapom od nuly, takže pred tým, ako skutočne začneme, sú potrebné 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 balík. Na rozdiel od nášho sprievodcu Webpack tu existuje iba jedna závislosť nástroja na zostavovanie. Parcel automaticky nainštaluje jazykové transformátory (ako Sass), keď ich zistí. 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 parcel
```
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
```

Teraz, keď máme nainštalované 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

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

V tomto bode je všetko na správnom mieste, ale Parcel potrebuje HTML stránku a skript npm na spustenie nášho servera.

Konfigurovať balík

S nainštalovanými závislosťami a s priečinkom projektu pripraveným na to, aby sme mohli začať kódovať, môžeme teraz nakonfigurovať Parcel a spustiť náš projekt lokálne. Samotný balík nevyžaduje žiadny konfiguračný súbor podľa návrhu, ale na spustenie nášho servera potrebujeme skript npm a súbor HTML.

Vyplňte src/index.htmlsúbor. Parcel potrebuje stránku na vykreslenie, takže našu index.htmlstránku používame na nastavenie niektorých základných HTML vrátane našich CSS a JavaScript súborov.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap w/ Parcel</title>
    <link rel="stylesheet" href="scss/styles.scss">
    <script type="module" src="js/main.js"></script>
  </head>
  <body>
    <div class="container py-4 px-3 mx-auto">
      <h1>Hello, Bootstrap and Parcel!</h1>
      <button class="btn btn-primary">Primary button</button>
    </div>
  </body>
</html>

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

Parcel automaticky zistí, že používame Sass, a nainštaluje doplnok Sass Parcel na jeho podporu. Ak však chcete, môžete spustiť aj manuálne npm i --save-dev @parcel/transformer-sass.

Pridajte skripty Parcel npm. Otvorte package.jsona pridajte nasledujúci startskript do scriptsobjektu. Tento skript použijeme na spustenie nášho vývojového servera Parcel a vykreslenie súboru HTML, ktorý sme vytvorili po jeho kompilácii do distadresára.
```
{
   // ...
   "scripts": {
     "start": "parcel serve src/index.html --public-url / --dist-dir dist",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   // ...
}
```
A nakoniec môžeme začať Parcel. 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

Import Bootstrapu do balíka vyžaduje dva importy, jeden do nášho styles.scssa jeden do nášho main.js.

Importujte CSS z 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 .
Importujte JS Bootstrap. src/js/main.jsAk chcete importovať všetky JS Bootstrapu, pridajte nasledujúce . Popper bude importovaný automaticky cez Bootstrap.
```
// 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 Parcel, 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.