Bootstrap & Parcel

Službeni vodič za uključivanje i spajanje Bootstrapovog CSS-a i JavaScripta u vaš projekt pomoću Parcela.

Na ovoj stranici

Želite li preskočiti na kraj? Preuzmite izvorni kod i radni demo za ovaj vodič iz repozitorija twbs/examples . Također možete otvoriti primjer u StackBlitzu , ali ga ne možete pokrenuti jer Parcel tamo trenutno nije podržan.

Postaviti

Gradimo Parcel projekt s Bootstrapom od nule, tako da postoje neki preduvjeti i početni koraci prije nego što stvarno počnemo. Ovaj vodič zahtijeva da imate instaliran Node.js i određeno poznavanje terminala.

Stvorite mapu projekta i postavite npm. Stvorit ćemo my-projectmapu i inicijalizirati npm s -yargumentom kako bismo izbjegli da nam postavlja sva interaktivna pitanja.
```
mkdir my-project && cd my-project
npm init -y
```
Instalirajte parcelu. Za razliku od našeg Webpack vodiča, ovdje postoji samo jedna ovisnost alata za izradu. Parcel će automatski instalirati jezične transformatore (kao što je Sass) čim ih otkrije. Koristimo --save-devkako bismo signalizirali da je ova ovisnost samo za razvojnu upotrebu, a ne za proizvodnju.
```
npm i --save-dev parcel
```
Instalirajte Bootstrap. Sada možemo instalirati Bootstrap. Također ćemo instalirati Popper jer naši padajući izbornici, skočni prozori i opisi alata ovise o njemu za njihovo pozicioniranje. Ako ne planirate koristiti te komponente, ovdje možete izostaviti Popper.
```
npm i --save bootstrap @popperjs/core
```

Sada kada imamo instalirane sve potrebne ovisnosti, možemo krenuti s radom na izradi projektnih datoteka i uvozu Bootstrapa.

Struktura projekta

Već smo stvorili my-projectmapu i inicijalizirali npm. Sada ćemo također stvoriti našu srcmapu, stilsku tablicu i JavaScript datoteku kako bismo zaokružili strukturu projekta. Pokrenite sljedeće iz my-projectili ručno stvorite mapu i strukturu datoteke prikazanu u nastavku.

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

Kada završite, vaš kompletan projekt trebao bi izgledati ovako:

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

U ovom trenutku sve je na pravom mjestu, ali Parcel treba HTML stranicu i npm skriptu za pokretanje našeg poslužitelja.

Konfigurirajte parcelu

S instaliranim ovisnostima i mapom našeg projekta spremnom za početak kodiranja, sada možemo konfigurirati Parcel i pokrenuti naš projekt lokalno. Sama parcela ne zahtijeva konfiguracijsku datoteku po dizajnu, ali trebamo npm skriptu i HTML datoteku za pokretanje našeg poslužitelja.

Ispunite src/index.htmldatoteku. Parcel treba stranicu za renderiranje, pa koristimo našu index.htmlstranicu za postavljanje nekih osnovnih HTML-ova, uključujući naše CSS i JavaScript datoteke.

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

Ovdje uključujemo malo Bootstrap stila s div class="container"i<button> kako bismo vidjeli kada Webpack učitava Bootstrapov CSS.

Parcel će automatski otkriti da koristimo Sass i instalirati dodatak Sass Parcel da ga podrži. Međutim, ako želite, možete i ručno pokrenuti npm i --save-dev @parcel/transformer-sass.

Dodajte skripte Parcel npm. Otvorite package.jsoni dodajte sljedeću startskriptu scriptsobjektu. Koristit ćemo ovu skriptu za pokretanje našeg poslužitelja za razvoj parcela i renderiranje HTML datoteke koju smo izradili nakon što je prevedemo u distdirektorij.
```
{
   // ...
   "scripts": {
     "start": "parcel serve src/index.html --public-url / --dist-dir dist",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   // ...
}
```
I konačno, možemo pokrenuti Parcel. Iz my-projectmape na vašem terminalu pokrenite tu novododanu npm skriptu:
```
npm start
```

U sljedećem i posljednjem odjeljku ovog vodiča uvest ćemo sav Bootstrapov CSS i JavaScript.

Uvezi Bootstrap

Uvoz Bootstrapa u Parcel zahtijeva dva uvoza, jedan u naš styles.scssi jedan u naš main.js.

Uvezite Bootstrapov CSS. Dodajte sljedeće za src/scss/styles.scssuvoz svih Bootstrapovih izvora Sass.
```
// Import all of Bootstrap's CSS
@import "~bootstrap/scss/bootstrap";
```
Također možete pojedinačno uvesti naše tablice stilova ako želite. Za pojedinosti pročitajte naše Sass uvozne dokumente .
Uvezite Bootstrapov JS. Dodajte sljedeće za src/js/main.jsuvoz svih Bootstrapovih JS-ova. Popper će se automatski uvesti putem Bootstrapa.
```
// Import all of Bootstrap's JS
import * as bootstrap from 'bootstrap'
```
Također možete pojedinačno uvesti JavaScript dodatke prema potrebi kako biste smanjili veličinu paketa:
```
import Alert from 'bootstrap/js/dist/alert'

// or, specify which plugins you need:
import { Tooltip, Toast, Popover } from 'bootstrap'
```
Pročitajte naše JavaScript dokumente za više informacija o tome kako koristiti Bootstrapove dodatke.
I gotovi ste! 🎉 S punim učitavanjem Bootstrapovog izvornog koda Sass i JS, vaš bi lokalni razvojni poslužitelj sada trebao izgledati ovako.

Sada možete početi dodavati sve Bootstrap komponente koje želite koristiti. Obavezno provjerite cjeloviti projekt primjera parcele kako biste uključili dodatni prilagođeni Sass i optimizirali svoju izgradnju uvozom samo dijelova Bootstrapovog CSS-a i JS-a koji su vam potrebni.

Ovdje vidite nešto pogrešno ili zastarjelo? Otvorite problem na GitHubu . Trebate li pomoć u rješavanju problema? Pretražite ili započnite raspravu na GitHubu.