Bootstrap & Pakke

Den offisielle veiledningen for hvordan du inkluderer og pakker Bootstraps CSS og JavaScript i prosjektet ditt ved å bruke Parcel.

På denne siden

Vil du hoppe til slutten? Last ned kildekoden og arbeidsdemoen for denne veiledningen fra twbs/eksempel-depotet . Du kan også åpne eksemplet i StackBlitz, men ikke kjøre det fordi Parcel for øyeblikket ikke støttes der.

Oppsett

Vi bygger et pakkeprosjekt med Bootstrap fra bunnen av, så det er noen forutsetninger og fremgangsmåter før vi virkelig kan komme i gang. Denne veiledningen krever at du har Node.js installert og litt kjennskap til terminalen.

Opprett en prosjektmappe og sett opp npm. Vi oppretter my-projectmappen og initialiserer npm med -yargumentet for å unngå at det stiller oss alle de interaktive spørsmålene.
```
mkdir my-project && cd my-project
npm init -y
```
Installer pakke. I motsetning til vår Webpack-guide, er det bare en enkelt byggeverktøyavhengig her. Parcel vil automatisk installere språktransformatorer (som Sass) etter hvert som den oppdager dem. Vi bruker --save-devå signalisere at denne avhengigheten kun er for utviklingsbruk og ikke for produksjon.
```
npm i --save-dev parcel
```
Installer Bootstrap. Nå kan vi installere Bootstrap. Vi vil også installere Popper siden rullegardinlistene, popovers og verktøytipsene våre avhenger av den for deres plassering. Hvis du ikke planlegger å bruke disse komponentene, kan du utelate Popper her.
```
npm i --save bootstrap @popperjs/core
```

Nå som vi har alle nødvendige avhengigheter installert, kan vi begynne å jobbe med å lage prosjektfilene og importere Bootstrap.

Prosjektstruktur

Vi har allerede opprettet my-projectmappen og initialisert npm. Nå skal vi også lage srcmappen, stilarket og JavaScript-filen vår for å avrunde prosjektstrukturen. Kjør følgende fra my-project, eller lag mappen og filstrukturen som vises nedenfor manuelt.

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

Når du er ferdig, skal hele prosjektet ditt se slik ut:

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

På dette tidspunktet er alt på rett plass, men Parcel trenger en HTML-side og npm-skript for å starte serveren vår.

Konfigurer pakke

Med avhengigheter installert og prosjektmappen vår klar for at vi kan begynne kodingen, kan vi nå konfigurere Parcel og kjøre prosjektet vårt lokalt. Pakke i seg selv krever ingen konfigurasjonsfil ved design, men vi trenger et npm-skript og en HTML-fil for å starte serveren vår.

Fyll ut src/index.htmlfilen. Pakke trenger en side for å gjengi, så vi bruker index.htmlsiden vår til å sette opp grunnleggende HTML, inkludert CSS- og JavaScript-filer.

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

Vi inkluderer litt Bootstrap-styling her med div class="container"og <button>slik at vi ser når Bootstraps CSS lastes av Webpack.

Parcel vil automatisk oppdage at vi bruker Sass og installere Sass Parcel-plugin for å støtte det. Men hvis du ønsker det, kan du også kjøre manuelt npm i --save-dev @parcel/transformer-sass.

Legg til Parcel npm-skriptene. Åpne package.jsonog legg til følgende startskript til scriptsobjektet. Vi bruker dette skriptet til å starte vår Pakkeutviklingsserver og gjengi HTML-filen vi opprettet etter at den er kompilert i distkatalogen.
```
{
   // ...
   "scripts": {
     "start": "parcel serve src/index.html --public-url / --dist-dir dist",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   // ...
}
```
Og endelig kan vi starte Parcel. Fra my-projectmappen i terminalen din, kjør det nylig lagt til npm-skriptet:
```
npm start
```

I den neste og siste delen av denne veiledningen vil vi importere alle Bootstraps CSS og JavaScript.

Importer Bootstrap

Å importere Bootstrap til Parcel krever to importer, en til vår styles.scssog en til vår main.js.

Importer Bootstraps CSS. Legg til følgende for src/scss/styles.scsså importere hele Bootstraps kilde Sass.
```
// Import all of Bootstrap's CSS
@import "~bootstrap/scss/bootstrap";
```
Du kan også importere stilarkene våre individuelt hvis du vil. Les våre Sass-importdokumenter for detaljer.
Importer Bootstraps JS. Legg til følgende for src/js/main.jså importere alle Bootstraps JS. Popper vil bli importert automatisk gjennom Bootstrap.
```
// Import all of Bootstrap's JS
import * as bootstrap from 'bootstrap'
```
Du kan også importere JavaScript-plugins individuelt etter behov for å holde pakkestørrelsene nede:
```
import Alert from 'bootstrap/js/dist/alert'

// or, specify which plugins you need:
import { Tooltip, Toast, Popover } from 'bootstrap'
```
Les våre JavaScript-dokumenter for mer informasjon om hvordan du bruker Bootstraps plugins.
Og du er ferdig! 🎉 Med Bootstraps kilde Sass og JS fullastet, skal din lokale utviklingsserver nå se slik ut.

Nå kan du begynne å legge til alle Bootstrap-komponenter du vil bruke. Sørg for å sjekke ut det komplette Parcel-eksempelprosjektet for hvordan du inkluderer ekstra tilpasset Sass og optimaliserer bygget ved å importere bare delene av Bootstraps CSS og JS du trenger.

Ser du noe galt eller utdatert her? Vennligst åpne et problem på GitHub . Trenger du hjelp til feilsøking? Søk eller start en diskusjon på GitHub.