Bootstrap și Vite

Ghidul oficial despre cum să includeți și să combinați CSS și JavaScript din Bootstrap în proiectul dvs. folosind Vite.

Pe aceasta pagina

Vrei să sari până la sfârșit? Descărcați codul sursă și demonstrația de lucru pentru acest ghid din depozitul twbs/examples . De asemenea, puteți deschide exemplul în StackBlitz pentru editare live.

Înființat

Construim un proiect Vite cu Bootstrap de la zero, așa că există câteva cerințe preliminare și pași inițiali înainte de a putea începe cu adevărat. Acest ghid necesită să aveți instalat Node.js și să fiți familiarizat cu terminalul.

Creați un folder de proiect și configurați npm. Vom crea my-projectfolderul și vom inițializa npm cu -yargumentul pentru a evita ca acesta să ne pună toate întrebările interactive.
```
mkdir my-project && cd my-project
npm init -y
```
Instalați Vite. Spre deosebire de ghidul nostru Webpack, aici există doar o singură dependență de instrument de compilare. Folosim --save-devsă semnalăm că această dependență este doar pentru dezvoltare și nu pentru producție.
```
npm i --save-dev vite
```
Instalați Bootstrap. Acum putem instala Bootstrap. De asemenea, vom instala Popper, deoarece meniurile noastre derulante, popover-urile și sfaturile de instrumente depind de el pentru poziționarea lor. Dacă nu intenționați să utilizați acele componente, puteți omite Popper aici.
```
npm i --save bootstrap @popperjs/core
```
Instalați dependență suplimentară. Pe lângă Vite și Bootstrap, avem nevoie de o altă dependență (Sass) pentru a importa și a grupa corect CSS-ul Bootstrap.
```
npm i --save-dev sass
```

Acum că avem toate dependențele necesare instalate și configurate, ne putem pune pe treabă creând fișierele de proiect și importând Bootstrap.

Structura proiectului

Am creat deja my-projectfolderul și am inițializat npm. Acum vom crea și srcfolderul, foaia de stil și fișierul JavaScript pentru a completa structura proiectului. Rulați următoarele din my-project, sau creați manual folderul și structura fișierelor prezentate mai jos.

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

Când ați terminat, proiectul dvs. complet ar trebui să arate astfel:

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

În acest moment, totul este la locul potrivit, dar Vite nu va funcționa pentru că nu am completat vite.config.jsîncă.

Configurați Vite

Cu dependențele instalate și folderul nostru de proiect gata pentru ca noi să începem codificarea, acum putem configura Vite și rula proiectul nostru local.

Deschideți vite.config.jsîn editorul dvs. Deoarece este gol, va trebui să îi adăugăm niște configurații standard, astfel încât să putem porni serverul nostru. Această parte a configurației îi spune lui Vite să caute JavaScript-ul proiectului nostru și cum ar trebui să se comporte serverul de dezvoltare (trăgând din srcfolderul cu reîncărcare la cald).
```
const path = require('path')

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

În continuare completăm src/index.html. Aceasta este pagina HTML pe care Vite o va încărca în browser pentru a utiliza CSS și JS pe care le vom adăuga în pașii ulterioare.

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

Includem un pic de stil Bootstrap aici cu div class="container"și , <button>astfel încât să vedem când CSS-ul Bootstrap este încărcat de Vite.

Acum avem nevoie de un script npm pentru a rula Vite. Deschideți package.jsonși adăugați startscriptul afișat mai jos (ar trebui să aveți deja scriptul de testare). Vom folosi acest script pentru a porni serverul nostru local de dezvoltare Vite.
```
{
  // ...
  "scripts": {
    "start": "vite",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  // ...
}
```
Și, în sfârșit, putem începe Vite. Din my-projectfolderul din terminalul dvs., rulați acel script npm nou adăugat:
```
npm start
```

În următoarea și ultima secțiune a acestui ghid, vom importa toate CSS și JavaScript din Bootstrap.

Import Bootstrap

Configurați importul Sass al Bootstrap în vite.config.js. Fișierul dvs. de configurare este acum complet și ar trebui să se potrivească cu fragmentul de mai jos. Singura parte nouă aici este resolvesecțiunea - o folosim pentru a adăuga un alias la fișierele noastre sursă din interior node_modulespentru a menține importurile cât mai simple posibil.
```
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
  }
}
```
Acum, să importăm CSS-ul Bootstrap. Adăugați următoarele la src/scss/styles.scsspentru a importa toate sursele Bootstrap Sass.
```
// Import all of Bootstrap's CSS
@import "~bootstrap/scss/bootstrap";
```
De asemenea, puteți importa foile noastre de stil individual dacă doriți. Citiți documentele noastre de import Sass pentru detalii.
Apoi încărcăm CSS și importăm JavaScript-ul Bootstrap. Adăugați următoarele pentru src/js/main.jsa încărca CSS-ul și a importa toate JS-urile Bootstrap. Popper va fi importat automat prin Bootstrap.
```
// Import our custom CSS
import '../scss/styles.scss'

// Import all of Bootstrap's JS
import * as bootstrap from 'bootstrap'
```
De asemenea, puteți importa pluginuri JavaScript individual, după cum este necesar, pentru a menține dimensiunile pachetelor mai mici:
```
import Alert from 'bootstrap/js/dist/alert';

// or, specify which plugins you need:
import { Tooltip, Toast, Popover } from 'bootstrap';
```
Citiți documentele noastre JavaScript pentru mai multe informații despre cum să utilizați pluginurile Bootstrap.
Și ai terminat! 🎉 Cu sursa Bootstrap Sass și JS complet încărcate, serverul tău de dezvoltare local ar trebui acum să arate așa.

Acum puteți începe să adăugați orice componente Bootstrap pe care doriți să le utilizați. Asigurați-vă că consultați exemplul de proiect Vite complet pentru cum să includeți Sass personalizat suplimentar și să vă optimizați construcția importând numai părțile CSS și JS Bootstrap de care aveți nevoie.

Vedeți ceva în neregulă sau depășit aici? Vă rugăm să deschideți o problemă pe GitHub . Aveți nevoie de ajutor pentru depanare? Căutați sau începeți o discuție pe GitHub.