Bootstrap & Vite

Die amptelike gids vir hoe om Bootstrap se CSS en JavaScript by jou projek in te sluit en te bundel deur Vite te gebruik.

Op hierdie bladsy

Wil jy oorslaan tot die einde? Laai die bronkode en werkende demo vir hierdie gids af vanaf die twbs/voorbeelde-bewaarplek . U kan ook die voorbeeld in StackBlitz oopmaak vir regstreekse redigering.

Stel op

Ons bou 'n Vite-projek met Bootstrap van nuuts af, so daar is 'n paar voorvereistes en vooraf stappe voordat ons regtig kan begin. Hierdie gids vereis dat jy Node.js moet installeer en 'n mate van vertroudheid met die terminale moet hê.

Skep 'n projekgids en stel npm op. Ons sal die my-projectlêergids skep en npm met die -yargument inisialiseer om te verhoed dat dit ons al die interaktiewe vrae vra.
```
mkdir my-project && cd my-project
npm init -y
```
Installeer Vite. In teenstelling met ons Webpack-gids, is daar net 'n enkele bou-instrument-afhanklikheid hier. Ons gebruik --save-devom aan te dui dat hierdie afhanklikheid slegs vir ontwikkelingsgebruik is en nie vir produksie nie.
```
npm i --save-dev vite
```
Installeer Bootstrap. Nou kan ons Bootstrap installeer. Ons sal ook Popper installeer aangesien ons aftreklys, popovers en nutswenke daarvan afhang vir hul posisionering. As jy nie van plan is om daardie komponente te gebruik nie, kan jy Popper hier weglaat.
```
npm i --save bootstrap @popperjs/core
```
Installeer bykomende afhanklikheid. Benewens Vite en Bootstrap het ons nog 'n afhanklikheid (Sass) nodig om Bootstrap se CSS behoorlik in te voer en te bundel.
```
npm i --save-dev sass
```

Noudat ons al die nodige afhanklikhede geïnstalleer en opgestel het, kan ons begin om die projeklêers te skep en Bootstrap in te voer.

Projekstruktuur

Ons het reeds die my-projectgids geskep en npm geïnitialiseer. Nou sal ons ook ons srcgids, stylblad en JavaScript-lêer skep om die projekstruktuur af te rond. Begin die volgende vanaf my-project, of skep met die hand die gids- en lêerstruktuur wat hieronder getoon word.

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

Wanneer jy klaar is, behoort jou volledige projek soos volg te lyk:

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

Op hierdie stadium is alles op die regte plek, maar Vite sal nie werk nie, want ons het ons nog nie ingevul vite.config.jsnie.

Stel Vite op

Met afhanklikhede geïnstalleer en ons projeklêer gereed vir ons om met kodering te begin, kan ons nou Vite konfigureer en ons projek plaaslik uitvoer.

Maak oop vite.config.jsin jou redigeerder. Aangesien dit leeg is, sal ons 'n paar boilerplate-konfigurasie daarby moet voeg sodat ons ons bediener kan begin. Hierdie deel van die konfigurasie vertel Vite moes soek vir ons projek se JavaScript en hoe die ontwikkelingsbediener moet optree (trek uit die srcgids met warm herlaai).
```
const path = require('path')

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

Volgende vul ons in src/index.html. Dit is die HTML-bladsy wat Vite in die blaaier sal laai om die gebundelde CSS en JS te gebruik wat ons in latere stappe daarby sal voeg.

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

Ons sluit 'n bietjie Bootstrap-stilering hier in met die div class="container"en <button>sodat ons kan sien wanneer Bootstrap se CSS deur Vite gelaai word.

Nou het ons 'n npm-skrip nodig om Vite te laat loop. Maak oop package.jsonen voeg die startskrif hieronder by (jy behoort reeds die toetsskrif te hê). Ons sal hierdie skrif gebruik om ons plaaslike Vite-ontwikkelaarbediener te begin.
```
{
  // ...
  "scripts": {
    "start": "vite",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  // ...
}
```
En uiteindelik kan ons Vite begin. Voer die nuut bygevoegde npm-skrip uit die my-projectgids in jou terminale uit:
```
npm start
```

In die volgende en laaste afdeling van hierdie gids, sal ons al Bootstrap se CSS en JavaScript invoer.

Voer Bootstrap in

Stel Bootstrap se Sass-invoer op in vite.config.js. Jou konfigurasielêer is nou voltooi en behoort by die brokkie hieronder te pas. Die enigste nuwe deel hier is die resolveafdeling - ons gebruik dit om 'n alias by ons bronlêers binne node_moduleste voeg om invoere so eenvoudig as moontlik te hou.

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

Kom ons voer nou Bootstrap se CSS in. Voeg die volgende by src/scss/styles.scssom al Bootstrap se bron Sass in te voer.
```
// Import all of Bootstrap's CSS
@import "~bootstrap/scss/bootstrap";
```
Jy kan ook ons stylblaaie individueel invoer as jy wil. Lees ons Sass-invoerdokumente vir besonderhede.
Volgende laai ons die CSS en voer Bootstrap se JavaScript in. Voeg die volgende by src/js/main.jsom die CSS te laai en al Bootstrap se JS in te voer. Popper sal outomaties deur Bootstrap ingevoer word.
```
// Import our custom CSS
import '../scss/styles.scss'

// Import all of Bootstrap's JS
import * as bootstrap from 'bootstrap'
```
Jy kan ook JavaScript-inproppe individueel invoer soos nodig om bondelgroottes laag te hou:
```
import Alert from 'bootstrap/js/dist/alert';

// or, specify which plugins you need:
import { Tooltip, Toast, Popover } from 'bootstrap';
```
Lees ons JavaScript-dokumente vir meer inligting oor hoe om Bootstrap se inproppe te gebruik.
En jy is klaar! 🎉 Met Bootstrap se bron Sass en JS ten volle gelaai, behoort jou plaaslike ontwikkelingsbediener nou so te lyk.

Nou kan jy begin om enige Bootstrap-komponente by te voeg wat jy wil gebruik. Kyk gerus na die volledige Vite-voorbeeldprojek vir hoe om bykomende pasgemaakte Sass in te sluit en jou bouwerk te optimaliseer deur slegs die dele van Bootstrap se CSS en JS in te voer wat jy nodig het.

Sien iets verkeerd of verouderd hier? Maak asseblief 'n probleem oop op GitHub . Het u hulp nodig met die oplos van probleme? Soek of begin 'n bespreking op GitHub.