Bootstrap & Pakke

Den officielle guide til, hvordan du inkluderer og bundter Bootstraps CSS og JavaScript i dit projekt ved hjælp af Parcel.

På denne side

Vil du springe til slutningen? Download kildekoden og arbejdsdemoen til denne vejledning fra twbs/eksempel-lageret . Du kan også åbne eksemplet i StackBlitz, men ikke køre det, fordi Parcel i øjeblikket ikke understøttes der.

Opsætning

Vi er ved at bygge et pakkeprojekt med Bootstrap fra bunden, så der er nogle forudsætninger og forhåndstrin, før vi rigtig kan komme i gang. Denne vejledning kræver, at du har Node.js installeret og en vis fortrolighed med terminalen.

Opret en projektmappe og opsæt npm. Vi opretter my-projectmappen og initialiserer npm med -yargumentet for at undgå, at det stiller os alle de interaktive spørgsmål.
```
mkdir my-project && cd my-project
npm init -y
```
Installer Pakke. I modsætning til vores Webpack-guide er der kun en enkelt byggeværktøjsafhængighed her. Parcel installerer automatisk sprogtransformatorer (som Sass), når den registrerer dem. Vi bruger --save-devtil at signalere, at denne afhængighed kun er til udviklingsbrug og ikke til produktion.
```
npm i --save-dev parcel
```
Installer Bootstrap. Nu kan vi installere Bootstrap. Vi vil også installere Popper, da vores dropdowns, popovers og værktøjstip afhænger af det for deres placering. Hvis du ikke planlægger at bruge disse komponenter, kan du udelade Popper her.
```
npm i --save bootstrap @popperjs/core
```

Nu hvor vi har alle de nødvendige afhængigheder installeret, kan vi komme i gang med at oprette projektfilerne og importere Bootstrap.

Projektets struktur

Vi har allerede oprettet my-projectmappen og initialiseret npm. Nu vil vi også oprette vores srcmappe, stylesheet og JavaScript-fil for at afrunde projektstrukturen. Kør følgende fra my-project, eller opret manuelt mappen og filstrukturen vist nedenfor.

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

Når du er færdig, skal dit komplette projekt se sådan ud:

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

På dette tidspunkt er alt på det rigtige sted, men Parcel har brug for en HTML-side og npm-script for at starte vores server.

Konfigurer pakke

Med afhængigheder installeret og vores projektmappe klar til, at vi kan begynde at kode, kan vi nu konfigurere Parcel og køre vores projekt lokalt. Pakken i sig selv kræver ingen konfigurationsfil, men vi har brug for et npm-script og en HTML-fil for at starte vores server.

Udfyld src/index.htmlfilen. Pakke har brug for en side for at gengive, så vi bruger vores index.htmlside til at opsætte nogle grundlæggende HTML, herunder vores 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 en lille smule Bootstrap-styling her med div class="container"og <button>, så vi kan se, hvornår Bootstraps CSS er indlæst af Webpack.

Parcel registrerer automatisk, at vi bruger Sass og installerer Sass Parcel-plugin for at understøtte det. Men hvis du ønsker det, kan du også køre manuelt npm i --save-dev @parcel/transformer-sass.

Tilføj Pakke npm-scripts. Åbn package.jsonog tilføj følgende startscript til scriptsobjektet. Vi bruger dette script til at starte vores Pakkeudviklingsserver og gengive den HTML-fil, vi oprettede, efter den er kompileret i distmappen.
```
{
   // ...
   "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. Kør det nyligt tilføjede npm-script fra my-projectmappen i din terminal:
```
npm start
```

I det næste og sidste afsnit i denne vejledning importerer vi alle Bootstraps CSS og JavaScript.

Importer Bootstrap

Import af Bootstrap til Parcel kræver to importer, en til vores styles.scssog en til vores main.js.

Importer Bootstraps CSS. Tilføj følgende til src/scss/styles.scssfor at importere hele Bootstraps kilde Sass.
```
// Import all of Bootstrap's CSS
@import "~bootstrap/scss/bootstrap";
```
Du kan også importere vores stylesheets individuelt, hvis du ønsker det. Læs vores Sass-importdokumenter for detaljer.
Importer Bootstraps JS. Tilføj følgende for src/js/main.jsat importere alle Bootstraps JS. Popper importeres automatisk gennem Bootstrap.
```
// Import all of Bootstrap's JS
import * as bootstrap from 'bootstrap'
```
Du kan også importere JavaScript-plugins individuelt efter behov for at holde bundtstørrelserne nede:
```
import Alert from 'bootstrap/js/dist/alert'

// or, specify which plugins you need:
import { Tooltip, Toast, Popover } from 'bootstrap'
```
Læs vores JavaScript -dokumenter for mere information om, hvordan du bruger Bootstraps plugins.
Og du er færdig! 🎉 Med Bootstraps kilde Sass og JS fuldt indlæst, skulle din lokale udviklingsserver nu se sådan ud.

Nu kan du begynde at tilføje alle Bootstrap-komponenter, du vil bruge. Sørg for at tjekke det komplette Parcel-eksempelprojekt for, hvordan du inkluderer yderligere tilpasset Sass og optimerer din build ved kun at importere de dele af Bootstraps CSS og JS, du har brug for.

Ser du noget forkert eller forældet her? Åbn venligst et problem på GitHub . Har du brug for hjælp til fejlfinding? Søg eller start en diskussion på GitHub.