Bootstrap & Parcel

Uradni vodnik za vključitev in povezovanje Bootstrapovega CSS in JavaScripta v vaš projekt z uporabo Parcela.

Na tej strani

Želite preskočiti na konec? Prenesite izvorno kodo in delujočo predstavitev za ta vodnik iz repozitorija twbs/examples . Primer lahko odprete tudi v StackBlitzu , vendar ga ne zaženete, ker Parcel tam trenutno ni podprt.

Nastaviti

Projekt Parcel z Bootstrapom gradimo od začetka, tako da obstaja nekaj predpogojev in začetnih korakov, preden lahko zares začnemo. Ta priročnik zahteva, da imate nameščen Node.js in nekaj znanja o terminalu.

Ustvarite mapo projekta in nastavite npm. Ustvarili bomo my-projectmapo in inicializirali npm z -yargumentom, da se izognemo postavljanju vseh interaktivnih vprašanj.
```
mkdir my-project && cd my-project
npm init -y
```
Namestite Parcel. Za razliko od našega vodnika Webpack je tukaj samo ena odvisnost orodja za gradnjo. Parcel bo samodejno namestil jezikovne transformatorje (kot je Sass), ko jih zazna. Uporabljamo --save-devza sporočanje, da je ta odvisnost samo za razvojno uporabo in ne za proizvodnjo.
```
npm i --save-dev parcel
```
Namestite Bootstrap. Zdaj lahko namestimo Bootstrap. Namestili bomo tudi Popper, saj so naši spustni meniji, pojavna okna in opisi orodij odvisni od tega za njihovo pozicioniranje. Če teh komponent ne nameravate uporabljati, lahko Popperja tukaj izpustite.
```
npm i --save bootstrap @popperjs/core
```

Zdaj, ko imamo nameščene vse potrebne odvisnosti, lahko začnemo ustvarjati projektne datoteke in uvažati Bootstrap.

Struktura projekta

Mapo smo že ustvarili my-projectin inicializirali npm. Zdaj bomo ustvarili tudi svojo srcmapo, slogovno datoteko in datoteko JavaScript, da zaokrožimo strukturo projekta. Zaženite naslednje iz my-projectali ročno ustvarite strukturo map in datotek, prikazano spodaj.

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

Ko končate, bi moral vaš celoten projekt izgledati takole:

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

Na tej točki je vse na pravem mestu, vendar Parcel potrebuje stran HTML in skript npm za zagon našega strežnika.

Konfigurirajte parcelo

Z nameščenimi odvisnostmi in našo projektno mapo, pripravljeno za začetek kodiranja, lahko zdaj konfiguriramo Parcel in izvajamo naš projekt lokalno. Parcel sam po zasnovi ne zahteva konfiguracijske datoteke, potrebujemo pa skript npm in datoteko HTML za zagon našega strežnika.

Izpolnite src/index.htmldatoteko. Parcel potrebuje stran za upodabljanje, zato našo index.htmlstran uporabljamo za nastavitev nekaj osnovnega HTML-ja, vključno z našimi datotekami CSS in JavaScript.

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

Tu smo vključili delček Bootstrapovega sloga z div class="container"in <button>tako, da vidimo, kdaj Webpack naloži Bootstrapov CSS.

Parcel bo samodejno zaznal, da uporabljamo Sass, in namestil vtičnik Sass Parcel za podporo. Če pa želite, lahko zaženete tudi ročno npm i --save-dev @parcel/transformer-sass.

Dodajte skripte Parcel npm. Odprite in objektu package.jsondodajte naslednji startskript . scriptsTa skript bomo uporabili za zagon našega razvojnega strežnika Parcel in upodabljanje datoteke HTML, ki smo jo ustvarili, potem ko bo prevedena v distimenik.
```
{
   // ...
   "scripts": {
     "start": "parcel serve src/index.html --public-url / --dist-dir dist",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   // ...
}
```
In končno lahko začnemo Parcel. Iz my-projectmape v vašem terminalu zaženite ta na novo dodan skript npm:
```
npm start
```

V naslednjem in zadnjem razdelku tega vodnika bomo uvozili vse Bootstrapove CSS in JavaScript.

Uvozi Bootstrap

Uvoz Bootstrapa v Parcel zahteva dva uvoza, enega v naš styles.scssin enega v naš main.js.

Uvozi Bootstrapov CSS. src/scss/styles.scssČe želite uvoziti vse Bootstrapove izvorne kode Sass, dodajte naslednje .
```
// Import all of Bootstrap's CSS
@import "~bootstrap/scss/bootstrap";
```
Naše slogovne tabele lahko uvozite tudi posamično, če želite. Za podrobnosti preberite naše dokumente o uvozu Sass .
Uvozi Bootstrapov JS. src/js/main.jsČe želite uvoziti vse Bootstrapove JS, dodajte naslednje . Popper bo samodejno uvožen prek programa Bootstrap.
```
// Import all of Bootstrap's JS
import * as bootstrap from 'bootstrap'
```
Po potrebi lahko uvozite tudi vtičnike JavaScript posamično, da zmanjšate velikost paketov:
```
import Alert from 'bootstrap/js/dist/alert'

// or, specify which plugins you need:
import { Tooltip, Toast, Popover } from 'bootstrap'
```
Preberite naše dokumente JavaScript za več informacij o uporabi vtičnikov Bootstrap.
In končali ste! 🎉 Ko sta izvorna koda Bootstrap Sass in JS v celoti naložena, bi moral vaš lokalni razvojni strežnik videti takole.

Zdaj lahko začnete dodajati vse komponente Bootstrap, ki jih želite uporabiti. Prepričajte se, da si ogledate celoten primer Parcel projekta , da ugotovite, kako vključiti dodaten Sass po meri in optimizirati svojo zgradbo z uvozom samo tistih delov Bootstrapovega CSS in JS, ki jih potrebujete.

Vidite tukaj nekaj narobe ali zastarelo? Odprite vprašanje na GitHubu . Potrebujete pomoč pri odpravljanju težav? Iščite ali začnite razpravo na GitHubu.