Bootstrap & Vite

De offisjele hantlieding foar hoe't jo Bootstrap's CSS en JavaScript kinne opnimme en bondele yn jo projekt mei Vite.

Op dizze side

Wolle jo nei it ein oerslaan? Download de boarnekoade en wurkdemo foar dizze hantlieding fan it twbs/foarbylden repository . Jo kinne it foarbyld ek iepenje yn StackBlitz foar live bewurking.

Opsette

Wy bouwe in Vite-projekt mei Bootstrap fanôf it begjin, dus d'r binne wat betingsten en stappen foarôf foardat wy echt kinne begjinne. Dizze gids fereasket dat jo Node.js ynstalleare hawwe en wat bekendheid mei de terminal.

Meitsje in projektmap en set npm yn. Wy sille de my-projectmap oanmeitsje en npm inisjalisearje mei it -yargumint om foar te kommen dat it ús alle ynteraktive fragen stelt.
```
mkdir my-project && cd my-project
npm init -y
```
Ynstallearje Vite. Oars as ús Webpack-gids, is d'r hjir mar ien ôfhinklikens fan ien build-ark. Wy brûke --save-devom te sinjalearjen dat dizze ôfhinklikens allinich is foar ûntwikkelingsgebrûk en net foar produksje.
```
npm i --save-dev vite
```
Ynstallearje Bootstrap. No kinne wy Bootstrap ynstallearje. Wy sille Popper ek ynstallearje, om't ús dropdowns, popovers en tooltips derfan ôfhingje foar har posysje. As jo net fan plan binne dizze komponinten te brûken, kinne jo Popper hjir weglitte.
```
npm i --save bootstrap @popperjs/core
```
Ynstallearje ekstra ôfhinklikens. Neist Vite en Bootstrap hawwe wy in oare ôfhinklikens (Sass) nedich om de CSS fan Bootstrap goed te ymportearjen en te bondeljen.
```
npm i --save-dev sass
```

No't wy alle nedige ôfhinklikens ynstalleare en opset hawwe, kinne wy oan it wurk komme oan it meitsjen fan de projektbestannen en it ymportearjen fan Bootstrap.

Projektstruktuer

Wy hawwe de my-projectmap al oanmakke en npm inisjalisearre. No sille wy ek ús srcmap, stylblêd en JavaScript-bestân oanmeitsje om de projektstruktuer ôf te foljen. Rinne de folgjende út my-project, of meitsje de map- en bestânstruktuer manuell oan dy't hjirûnder werjûn wurdt.

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

As jo klear binne, moat jo folsleine projekt der sa útsjen:

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

Op dit punt is alles op it goede plak, mar Vite sil net wurkje, om't wy ús noch net ynfolle vite.config.jshawwe.

Konfigurearje Vite

Mei ôfhinklikens ynstalleare en ús projektmap klear foar ús om te begjinnen mei kodearring, kinne wy no Vite konfigurearje en ús projekt lokaal útfiere.

Iepenje vite.config.jsyn jo bewurker. Om't it leech is, moatte wy wat boilerplate-konfiguraasje tafoegje, sadat wy ús tsjinner kinne starte. Dit diel fan 'e konfiguraasje fertelt dat Vite soe sykje nei JavaScript fan ús projekt en hoe't de ûntwikkelingstsjinner moat gedrage (út de srcmap lûke mei hyt opnij laden).
```
const path = require('path')

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

Folgjende wy ynfolje src/index.html. Dit is de HTML-side dy't Vite yn 'e blêder sil laden om de bondele CSS en JS te brûken dy't wy yn lettere stappen sille tafoegje.

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

Wy befetsje hjir in bytsje Bootstrap-styling mei de div class="container"en <button>sadat wy sjogge wannear't Bootstrap's CSS wurdt laden troch Vite.

No hawwe wy in npm-skript nedich om Vite út te fieren. Iepenje package.jsonen foegje it starthjirûnder werjûn skript ta (jo moatte it testskript al hawwe). Wy sille dit skript brûke om ús lokale Vite dev-tsjinner te starten.
```
{
  // ...
  "scripts": {
    "start": "vite",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  // ...
}
```
En as lêste kinne wy Vite begjinne. Ut de my-projectmap yn jo terminal, rinne dat nij tafoege npm-skript:
```
npm start
```

Yn 'e folgjende en lêste seksje nei dizze hantlieding sille wy alle CSS en JavaScript fan Bootstrap ymportearje.

Ymportearje Bootstrap

Set Bootstrap's Sass-ymport yn vite.config.js. Jo konfiguraasjetriem is no kompleet en moat oerienkomme mei it snippet hjirûnder. It ienige nije diel hjir is de resolveseksje - wy brûke dit om in alias ta te foegjen oan ús boarnebestannen binnen node_modulesom ymporten sa ienfâldich mooglik te hâlden.

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

Litte wy no de CSS fan Bootstrap ymportearje. Foegje it folgjende ta src/scss/styles.scssoan om alle boarne Sass fan Bootstrap te ymportearjen.
```
// Import all of Bootstrap's CSS
@import "~bootstrap/scss/bootstrap";
```
Jo kinne ús stylblêden ek yndividueel ymportearje as jo wolle. Lês ús Sass ymportdokuminten foar details.
Folgjende laden wy de CSS en ymportearje Bootstrap's JavaScript. Foegje it folgjende ta src/js/main.jsom de CSS te laden en alle Bootstrap's JS te ymportearjen. Popper sil automatysk wurde ymportearre fia Bootstrap.
```
// Import our custom CSS
import '../scss/styles.scss'

// Import all of Bootstrap's JS
import * as bootstrap from 'bootstrap'
```
Jo kinne JavaScript-plugins ek yndividueel ymportearje as nedich om bondelgrutte te hâlden:
```
import Alert from 'bootstrap/js/dist/alert';

// or, specify which plugins you need:
import { Tooltip, Toast, Popover } from 'bootstrap';
```
Lês ús JavaScript-dokuminten foar mear ynformaasje oer hoe't jo de plugins fan Bootstrap kinne brûke.
En do bist klear! 🎉 Mei Bootstrap's boarne Sass en JS folslein laden, soe jo lokale ûntwikkelingsserver no der sa útsjen moatte.

No kinne jo begjinne mei it tafoegjen fan alle Bootstrap-komponinten dy't jo wolle brûke. Wês wis dat jo it folsleine Vite-foarbyldprojekt kontrolearje foar hoe't jo ekstra oanpaste Sass opnimme en jo build optimalisearje troch allinich de dielen fan Bootstrap's CSS en JS te ymportearjen dy't jo nedich binne.

Sjoch hjir wat ferkeard of ferâldere? Iepenje asjebleaft in probleem op GitHub . Help nedich by it oplossen fan problemen? Sykje of begjin in diskusje op GitHub.