Bootstrap & Vite

Den offiziellen Guide fir wéi Dir Bootstrap's CSS a JavaScript an Ärem Projet mat Vite enthält a bündelt.

Op dëser Säit

Wëllt Dir bis zum Schluss sprangen? Luet de Quellcode an d'Aarbechtsdemo fir dëse Guide aus dem twbs/examples Repository erof . Dir kënnt och d'Beispill am StackBlitz fir Live Redaktioun opmaachen.

Ageriicht

Mir bauen e Vite-Projet mat Bootstrap vun Null un, sou datt et e puer Viraussetzungen a Virausschrëtt sinn ier mir wierklech kënne starten. Dëse Guide erfuerdert datt Dir Node.js installéiert hutt an e bësse Bekanntschaft mam Terminal.

Erstellt e Projet Dossier a setup npm. Mir erstellen den my-projectDossier an initialiséieren npm mam -yArgument fir ze vermeiden datt et eis all interaktiv Froen stellt.
```
mkdir my-project && cd my-project
npm init -y
```
Installéiert Vite. Am Géigesaz zu eisem Webpack Guide gëtt et nëmmen eng eenzeg Build Tool Ofhängegkeet hei. Mir benotze --save-devfir ze signaliséieren datt dës Ofhängegkeet nëmme fir Entwécklungsnotzung ass an net fir Produktioun.
```
npm i --save-dev vite
```
Installéiert Bootstrap. Elo kënne mir Bootstrap installéieren. Mir wäerten och Popper installéieren well eis Dropdowns, Popovers, an Tooltips dovun ofhänken fir hir Positionéierung. Wann Dir net plangt dës Komponenten ze benotzen, kënnt Dir de Popper hei ausgoen.
```
npm i --save bootstrap @popperjs/core
```
Installéiert zousätzlech Ofhängegkeet. Zousätzlech zu Vite a Bootstrap brauche mir eng aner Ofhängegkeet (Sass) fir de Bootstrap's CSS richteg z'importéieren an ze bündelen.
```
npm i --save-dev sass
```

Elo datt mir all déi néideg Ofhängegkeeten installéiert a Konfiguratioun hunn, kënne mir schaffen fir d'Projetdateien ze kreéieren an Bootstrap z'importéieren.

Projet Struktur

Mir hunn den my-projectDossier schonn erstallt an npm initialiséiert. Elo wäerte mir och eisen srcDossier, Stylesheet, a JavaScript Datei erstellen fir d'Projetstruktur ofzeschléissen. Fëllt déi folgend aus my-project, oder erstellt den Dossier an d'Dateistruktur manuell hei ënnen.

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

Wann Dir fäerdeg sidd, sollt Äre komplette Projet esou ausgesinn:

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

Zu dësem Zäitpunkt ass alles op der richteger Plaz, awer Vite funktionnéiert net well mir eis nach net ausgefëllt vite.config.jshunn.

Vite konfiguréieren

Mat Ofhängegkeeten installéiert an eisem Projet Dossier prett fir eis Kodéierung ze starten, kënne mir elo Vite konfiguréieren an eise Projet lokal lafen.

Open vite.config.jsan Ärem Editor. Well et eidel ass, musse mir e puer Boilerplate Configuratioun derbäi addéieren fir datt mir eise Server starten. Dësen Deel vun der Configuratioun erzielt Vite fir de JavaScript vun eisem Projet ze sichen a wéi den Entwécklungsserver sech soll behuelen (zitt aus dem srcDossier mat waarme Reload).
```
const path = require('path')

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

Als nächst fëllt mir aus src/index.html. Dëst ass d'HTML Säit Vite wäert am Browser lueden fir de gebündelte CSS an JS ze benotzen déi mir a spéider Schrëtt derbäi addéieren.

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

Mir enthalen e bësse Bootstrap Styling hei mat der div class="container"a <button>sou datt mir gesinn wann de Bootstrap's CSS vum Vite gelueden gëtt.

Elo brauche mir en npm Skript fir Vite ze lafen. Öffnen package.jsona füügt de startSkript hei ënnen un (Dir sollt schonn den Testskript hunn). Mir benotzen dëse Skript fir eise lokalen Vite Dev Server ze starten.
```
{
  // ...
  "scripts": {
    "start": "vite",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  // ...
}
```
An endlech kënne mir Vite ufänken. Aus dem my-projectDossier an Ärem Terminal, lafen dat neit addéierten npm Skript:
```
npm start
```

An der nächster a leschter Sektioun zu dësem Guide importéiere mir all Bootstrap's CSS a JavaScript.

Import Bootstrap

Setzt Bootstrap's Sass Import an vite.config.js. Är Konfiguratiounsdatei ass elo fäerdeg a soll dem Snippet hei drënner passen. Deen eenzegen neien Deel hei ass d' resolveSektioun - mir benotzen dëst fir en Alias an eis Quelldateien dobannen ze addéieren node_modulesfir Importer sou einfach wéi méiglech ze halen.
```
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
  }
}
```
Elo, loosst eis Bootstrap's CSS importéieren. Füügt déi folgend fir src/scss/styles.scssall Bootstrap's Quell Sass z'importéieren.
```
// Import all of Bootstrap's CSS
@import "~bootstrap/scss/bootstrap";
```
Dir kënnt eis Stylesheeten och individuell importéieren wann Dir wëllt. Liest eis Sass Import Dokumenter fir Detailer.
Als nächst luede mir d'CSS an importéieren Bootstrap's JavaScript. Füügt déi folgend fir src/js/main.jsden CSS ze lueden an all Bootstrap's JS z'importéieren. Popper gëtt automatesch duerch Bootstrap importéiert.
```
// Import our custom CSS
import '../scss/styles.scss'

// Import all of Bootstrap's JS
import * as bootstrap from 'bootstrap'
```
Dir kënnt och JavaScript Plugins individuell importéieren wéi néideg fir Bündelgréissten erof ze halen:
```
import Alert from 'bootstrap/js/dist/alert';

// or, specify which plugins you need:
import { Tooltip, Toast, Popover } from 'bootstrap';
```
Liest eis JavaScript Dokumenter fir méi Informatioun iwwer wéi Dir Bootstrap's Plugins benotzt.
An Dir sidd fäerdeg! 🎉 Mat Bootstrap Quell Sass a JS voll gelueden, sollt Äre lokalen Entwécklungsserver elo esou ausgesinn.

Elo kënnt Dir ufänken all Bootstrap Komponenten ze addéieren déi Dir benotze wëllt. Gitt sécher de komplette Vite Beispillprojet ze kucken fir wéi Dir zousätzlech personaliséiert Sass enthält an Äre Bau optiméiert andeems Dir nëmmen déi Deeler vum Bootstrap's CSS an JS importéiert déi Dir braucht.

Gesinn eppes falsch oder aktuell hei? Maacht w.e.g. en Thema op GitHub op . Braucht Dir Hëllef fir Probleemer ze léisen? Sicht oder start eng Diskussioun op GitHub.