Bootstrap & Vite

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

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 for live redigering.

Opsætning

Vi er ved at bygge et Vite-projekt 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 Vite. I modsætning til vores Webpack-guide er der kun en enkelt byggeværktøjsafhængighed her. Vi bruger --save-devtil at signalere, at denne afhængighed kun er til udviklingsbrug og ikke til produktion.
```
npm i --save-dev vite
```
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
```
Installer yderligere afhængighed. Ud over Vite og Bootstrap har vi brug for en anden afhængighed (Sass) for korrekt at importere og bundle Bootstraps CSS.
```
npm i --save-dev sass
```

Nu hvor vi har alle de nødvendige afhængigheder installeret og opsat, 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 vite.config.js

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
└── vite.config.js

På dette tidspunkt er alt på det rigtige sted, men Vite fungerer ikke, fordi vi ikke har udfyldt vores vite.config.jsendnu.

Konfigurer Vite

Med afhængigheder installeret og vores projektmappe klar til, at vi kan begynde at kode, kan vi nu konfigurere Vite og køre vores projekt lokalt.

Åbn vite.config.jsi din editor. Da det er tomt, bliver vi nødt til at tilføje nogle boilerplate-konfigurationer til det, så vi kan starte vores server. Denne del af konfigurationen fortæller, at Vite skulle lede efter vores projekts JavaScript, og hvordan udviklingsserveren skulle opføre sig (trækker fra srcmappen med hot reload).
```
const path = require('path')

export default {
  root: path.resolve(__dirname, 'src'),
  server: {
    port: 8080,
    hot: true
  }
}
```

Dernæst udfylder vi src/index.html. Dette er HTML-siden, som Vite vil indlæse i browseren for at bruge den medfølgende CSS og JS, som vi tilføjer til den i senere trin.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap w/ Vite</title>
  </head>
  <body>
    <div class="container py-4 px-3 mx-auto">
      <h1>Hello, Bootstrap and Vite!</h1>
      <button class="btn btn-primary">Primary button</button>
    </div>
    <script type="module" src="./js/main.js"></script>
  </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 Vite.

Nu har vi brug for et npm-script til at køre Vite. Åbn package.jsonog tilføj startscriptet vist nedenfor (du burde allerede have testscriptet). Vi bruger dette script til at starte vores lokale Vite-udviklerserver.
```
{
  // ...
  "scripts": {
    "start": "vite",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  // ...
}
```
Og endelig kan vi starte Vite. 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

Konfigurer Bootstraps Sass-import i vite.config.js. Din konfigurationsfil er nu færdig og bør matche uddraget nedenfor. Den eneste nye del her er resolvesektionen - vi bruger denne til at tilføje et alias til vores kildefiler indeni node_modulesfor at holde importen så enkel som muligt.

const path = require('path')

export default {
  root: path.resolve(__dirname, 'src'),
  resolve: {
    alias: {
      '~bootstrap': path.resolve(__dirname, 'node_modules/bootstrap'),
    }
  },
  server: {
    port: 8080,
    hot: true
  }
}

Lad os nu importere 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.
Dernæst indlæser vi CSS'en og importerer Bootstraps JavaScript. Tilføj følgende til src/js/main.jsfor at indlæse CSS og importere alle Bootstraps JS. Popper importeres automatisk gennem Bootstrap.
```
// Import our custom CSS
import '../scss/styles.scss'

// 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 Vite-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.