Bootstrap & Parcel

Zvanični vodič kako da uključite i povežete Bootstrap-ov CSS i JavaScript u svoj projekat koristeći Parcel.

Na ovoj stranici

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

Postaviti

Gradimo projekat Parcel s Bootstrapom od nule, tako da postoje neki preduslovi i prvi koraci prije nego što zaista počnemo. Ovaj vodič zahtijeva od vas da imate instaliran Node.js i određeno poznavanje terminala.

Kreirajte direktorij projekta i postavite npm. Kreiraćemo my-projectfasciklu i inicijalizovati npm sa -yargumentom kako bismo izbegli da nam postavlja sva interaktivna pitanja.
```
mkdir my-project && cd my-project
npm init -y
```
Instalirajte Parcel. Za razliku od našeg Webpack vodiča, ovdje postoji samo jedna ovisnost o alatu za izradu. Parcel će automatski instalirati jezičke transformatore (kao što je Sass) kada ih otkrije. Koristimo --save-devda signaliziramo 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 menii, iskačući oglasi i opisi alata zavise od toga za njihovo pozicioniranje. Ako ne planirate koristiti te komponente, ovdje možete izostaviti Poppera.
```
npm i --save bootstrap @popperjs/core
```

Sada kada imamo instalirane sve potrebne ovisnosti, možemo pristupiti stvaranju projektnih datoteka i uvozu Bootstrapa.

Struktura projekta

Već smo kreirali my-projectfolder i inicijalizirali npm. Sada ćemo također kreirati našu srcmapu, stilsku tablicu i JavaScript datoteku kako bismo zaokružili strukturu projekta. Pokrenite sljedeće iz my-project, ili ručno kreirajte mapu i strukturu datoteka prikazanu ispod.

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

Kada završite, vaš kompletan projekat bi trebao 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 Parcelu je potrebna HTML stranica i npm skripta za pokretanje našeg servera.

Konfigurišite parcelu

S instaliranim ovisnostima i našom mapom projekta koja je spremna za početak kodiranja, sada možemo konfigurirati Parcel i pokrenuti naš projekt lokalno. Sama parcela ne zahtijeva konfiguracijski fajl po dizajnu, ali nam je potrebna npm skripta i HTML datoteka za pokretanje našeg servera.

Popunite src/index.htmldatoteku. Parcelu je potrebna stranica za renderiranje, tako da koristimo našu index.htmlstranicu za postavljanje nekog osnovnog HTML-a, 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 sa div class="container"i <button>tako da vidimo kada je Bootstrapov CSS učitan od strane Webpack-a.

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

Dodajte Parcel npm skripte. Otvorite package.jsoni dodajte sljedeću startskriptu scriptsobjektu. Koristit ćemo ovu skriptu da pokrenemo naš Parcel razvojni server i generiramo HTML datoteku koju smo kreirali nakon što je prevedena 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-projectfoldera na vašem terminalu pokrenite tu novododatu npm skriptu:
```
npm start
```

U sledećem i poslednjem odeljku ovog vodiča, mi ćemo uvesti sve Bootstrapove CSS i JavaScript.

Import Bootstrap

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

Uvezite Bootstrap-ov CSS. Dodajte sljedeće u src/scss/styles.scssda uvezete sav izvorni Sass Bootstrapa.
```
// Import all of Bootstrap's CSS
@import "~bootstrap/scss/bootstrap";
```
Također možete uvesti naše stilove pojedinačno ako želite. Pročitajte naše Sass uvozne dokumente za detalje.
Uvezite JS Bootstrapa. Dodajte sljedeće u src/js/main.jsda uvezete sve Bootstrapove JS. Popper će biti automatski uvezen putem Bootstrapa.
```
// Import all of Bootstrap's JS
import * as bootstrap from 'bootstrap'
```
Također možete uvesti JavaScript dodatke pojedinačno po 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 Bootstrap dodatke.
I gotovi ste! 🎉 Kada su izvorni Sass i JS Bootstrap potpuno učitani, vaš lokalni razvojni server bi sada trebao izgledati ovako.

Sada možete početi da dodajete sve komponente Bootstrapa koje želite da koristite. Obavezno provjerite kompletan primjer projekta Parcel kako biste uključili dodatni prilagođeni Sass i optimizirali svoju konstrukciju uvozom samo dijelova Bootstrap-ovog CSS-a i JS-a koji su vam potrebni.

Vidite ovdje nešto pogrešno ili zastarjelo? Molimo otvorite problem na GitHubu . Trebate pomoć u rješavanju problema? Pretražite ili započnite diskusiju na GitHubu.