Bootstrap & Vite

De officiële gids voor het opnemen en bundelen van Bootstrap's CSS en JavaScript in uw project met behulp van Vite.

Op deze pagina

Wil je naar het einde springen? Download de broncode en werkende demo voor deze handleiding uit de twbs/examples-repository . U kunt het voorbeeld ook openen in StackBlitz voor live bewerking.

Opstelling

We bouwen vanaf het begin een Vite-project met Bootstrap, dus er zijn enkele vereisten en stappen vooraf voordat we echt aan de slag kunnen. Deze handleiding vereist dat u Node.js hebt geïnstalleerd en enige bekendheid met de terminal.

Maak een projectmap en stel npm in. We zullen de my-projectmap maken en npm initialiseren met het -yargument om te voorkomen dat het ons alle interactieve vragen stelt.
```
mkdir my-project && cd my-project
npm init -y
```
Installeer Vite. In tegenstelling tot onze Webpack-gids, is er hier slechts één afhankelijkheid van een build-tool. We gebruiken --save-devom aan te geven dat deze afhankelijkheid alleen voor ontwikkelingsgebruik is en niet voor productie.
```
npm i --save-dev vite
```
Installeer Bootstrap. Nu kunnen we Bootstrap installeren. We zullen Popper ook installeren omdat onze dropdowns, popovers en tooltips ervan afhankelijk zijn voor hun positionering. Als u niet van plan bent deze componenten te gebruiken, kunt u Popper hier weglaten.
```
npm i --save bootstrap @popperjs/core
```
Installeer extra afhankelijkheid. Naast Vite en Bootstrap hebben we nog een afhankelijkheid (Sass) nodig om de CSS van Bootstrap correct te importeren en te bundelen.
```
npm i --save-dev sass
```

Nu we alle benodigde afhankelijkheden hebben geïnstalleerd en ingesteld, kunnen we aan de slag met het maken van de projectbestanden en het importeren van Bootstrap.

Projectstructuur

We hebben de my-projectmap al gemaakt en npm geïnitialiseerd. Nu zullen we ook onze srcmap, stylesheet en JavaScript-bestand maken om de projectstructuur af te ronden. Voer het volgende uit vanaf my-project, of maak handmatig de onderstaande map en bestandsstructuur aan.

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

Als u klaar bent, ziet uw volledige project er als volgt uit:

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

Op dit moment staat alles op de goede plek, maar Vite zal niet werken omdat we onze nog niet hebben ingevuld vite.config.js.

Vite configureren

Nu afhankelijkheden zijn geïnstalleerd en onze projectmap klaar is om te beginnen met coderen, kunnen we Vite nu configureren en ons project lokaal uitvoeren.

Openen vite.config.jsin je editor. Omdat het leeg is, moeten we er een standaardconfiguratie aan toevoegen, zodat we onze server kunnen starten. Dit deel van de configuratie vertelt Vite dat het moet zoeken naar het JavaScript van ons project en hoe de ontwikkelserver zich zou moeten gedragen (uit de srcmap halen met hot reload).
```
const path = require('path')

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

Vervolgens vullen we in src/index.html. Dit is de HTML-pagina die Vite in de browser zal laden om de gebundelde CSS en JS te gebruiken die we er in latere stappen aan zullen toevoegen.

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

We voegen hier een klein beetje Bootstrap-styling toe met de div class="container"en <button>zodat we kunnen zien wanneer Bootstrap's CSS wordt geladen door Vite.

Nu hebben we een npm-script nodig om Vite uit te voeren. Open package.jsonen voeg het startonderstaande script toe (u zou het testscript al moeten hebben). We zullen dit script gebruiken om onze lokale Vite dev-server te starten.
```
{
  // ...
  "scripts": {
    "start": "vite",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  // ...
}
```
En tot slot kunnen we Vite starten. Voer vanuit de my-projectmap in uw terminal dat nieuw toegevoegde npm-script uit:
```
npm start
```

In het volgende en laatste deel van deze handleiding importeren we alle CSS en JavaScript van Bootstrap.

Bootstrap importeren

Stel de Sass-import van Bootstrap in in vite.config.js. Uw configuratiebestand is nu compleet en moet overeenkomen met het onderstaande fragment. Het enige nieuwe deel hier is de resolvesectie - we gebruiken dit om een alias toe te voegen aan onze bronbestanden node_modulesom het importeren zo eenvoudig mogelijk te houden.
```
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
  }
}
```
Laten we nu de CSS van Bootstrap importeren. Voeg het volgende toe aan src/scss/styles.scssom alle Sass-bronnen van Bootstrap te importeren.
```
// Import all of Bootstrap's CSS
@import "~bootstrap/scss/bootstrap";
```
U kunt onze stylesheets ook afzonderlijk importeren als u dat wilt. Lees onze Sass-importdocumenten voor meer informatie.
Vervolgens laden we de CSS en importeren we Bootstrap's JavaScript. Voeg het volgende toe src/js/main.jsaan om de CSS te laden en alle JS van Bootstrap te importeren. Popper wordt automatisch geïmporteerd via Bootstrap.
```
// Import our custom CSS
import '../scss/styles.scss'

// Import all of Bootstrap's JS
import * as bootstrap from 'bootstrap'
```
U kunt indien nodig ook afzonderlijk JavaScript-plug-ins importeren om de bundelgroottes laag te houden:
```
import Alert from 'bootstrap/js/dist/alert';

// or, specify which plugins you need:
import { Tooltip, Toast, Popover } from 'bootstrap';
```
Lees onze JavaScript-documenten voor meer informatie over het gebruik van de plug-ins van Bootstrap.
En je bent klaar! 🎉 Met de bron Sass en JS van Bootstrap volledig geladen, zou uw lokale ontwikkelingsserver er nu zo uit moeten zien.

Nu kunt u beginnen met het toevoegen van alle Bootstrap-componenten die u wilt gebruiken. Zorg ervoor dat u het volledige Vite-voorbeeldproject bekijkt om te zien hoe u extra aangepaste Sass kunt opnemen en hoe u uw build kunt optimaliseren door alleen de delen van Bootstrap's CSS en JS te importeren die u nodig hebt.

Zie je hier iets mis of verouderd? Open een probleem op GitHub . Hulp nodig bij het oplossen van problemen? Zoek of start een discussie op GitHub.