Bootstrap & Vite

La guida ufficiale su come includere e raggruppare CSS e JavaScript di Bootstrap nel tuo progetto usando Vite.

Su questa pagina

Vuoi saltare alla fine? Scarica il codice sorgente e la demo funzionante per questa guida dal repository twbs/examples . Puoi anche aprire l'esempio in StackBlitz per la modifica dal vivo.

Impostare

Stiamo costruendo da zero un progetto Vite con Bootstrap, quindi ci sono alcuni prerequisiti e passaggi preliminari prima di poter davvero iniziare. Questa guida richiede l'installazione di Node.js e una certa familiarità con il terminale.

Crea una cartella di progetto e imposta npm. Creeremo la my-projectcartella e inizializzeremo npm con l' -yargomento per evitare che ci pongano tutte le domande interattive.
```
mkdir my-project && cd my-project
npm init -y
```
Installa Vite. A differenza della nostra guida Webpack, qui c'è solo una singola dipendenza dello strumento di compilazione. Usiamo --save-devper segnalare che questa dipendenza è solo per uso di sviluppo e non per produzione.
```
npm i --save-dev vite
```
Installa Bootstrap. Ora possiamo installare Bootstrap. Installeremo anche Popper poiché i nostri menu a discesa, popover e suggerimenti dipendono da esso per il loro posizionamento. Se non prevedi di utilizzare questi componenti, puoi omettere Popper qui.
```
npm i --save bootstrap @popperjs/core
```
Installa una dipendenza aggiuntiva. Oltre a Vite e Bootstrap, abbiamo bisogno di un'altra dipendenza (Sass) per importare e raggruppare correttamente i CSS di Bootstrap.
```
npm i --save-dev sass
```

Ora che abbiamo tutte le dipendenze necessarie installate e configurate, possiamo metterci al lavoro creando i file di progetto e importando Bootstrap.

Struttura del progetto

Abbiamo già creato la my-projectcartella e inizializzato npm. Ora creeremo anche la nostra srccartella, foglio di stile e file JavaScript per completare la struttura del progetto. Eseguire quanto segue da my-projecto creare manualmente la struttura di cartelle e file mostrata di seguito.

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

Quando hai finito, il tuo progetto completo dovrebbe assomigliare a questo:

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

A questo punto è tutto al posto giusto, ma Vite non funzionerà perché non abbiamo ancora compilato il nostro vite.config.js.

Configura Vite

Con le dipendenze installate e la nostra cartella del progetto pronta per iniziare la codifica, ora possiamo configurare Vite ed eseguire il nostro progetto localmente.

Apri vite.config.jsnel tuo editor. Dal momento che è vuoto, dovremo aggiungere alcune configurazioni standard ad esso in modo da poter avviare il nostro server. Questa parte della configurazione dice a Vite di cercare il JavaScript del nostro progetto e come dovrebbe comportarsi il server di sviluppo (estrazione dalla srccartella con ricarica a caldo).
```
const path = require('path')

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

Successivamente riempiamo src/index.html. Questa è la pagina HTML che Vite caricherà nel browser per utilizzare CSS e JS in bundle che aggiungeremo ad essa nei passaggi successivi.

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

Stiamo includendo un po' di stile Bootstrap qui con div class="container"e <button>in modo da vedere quando il CSS di Bootstrap viene caricato da Vite.

Ora abbiamo bisogno di uno script npm per eseguire Vite. Apri package.jsone aggiungi lo startscript mostrato di seguito (dovresti già avere lo script di test). Useremo questo script per avviare il nostro server di sviluppo Vite locale.
```
{
  // ...
  "scripts": {
    "start": "vite",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  // ...
}
```
E finalmente, possiamo avviare Vite. Dalla my-projectcartella nel tuo terminale, esegui lo script npm appena aggiunto:
```
npm start
```

Nella prossima e ultima sezione di questa guida importeremo tutti i CSS e JavaScript di Bootstrap.

Importa Bootstrap

Imposta l'importazione Sass di Bootstrap in vite.config.js. Il tuo file di configurazione è ora completo e dovrebbe corrispondere allo snippet di seguito. L'unica parte nuova qui è la resolvesezione: la usiamo per aggiungere un alias ai nostri file sorgente all'interno node_modulesper mantenere le importazioni il più semplici possibile.
```
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
  }
}
```
Ora importiamo il CSS di Bootstrap. Aggiungi quanto segue a src/scss/styles.scssper importare tutti i sorgenti Sass di Bootstrap.
```
// Import all of Bootstrap's CSS
@import "~bootstrap/scss/bootstrap";
```
Puoi anche importare i nostri fogli di stile singolarmente, se lo desideri. Leggi i nostri documenti di importazione Sass per i dettagli.
Quindi carichiamo il CSS e importiamo JavaScript di Bootstrap. Aggiungi quanto segue per src/js/main.jscaricare il CSS e importare tutto il JS di Bootstrap. Popper verrà importato automaticamente tramite Bootstrap.
```
// Import our custom CSS
import '../scss/styles.scss'

// Import all of Bootstrap's JS
import * as bootstrap from 'bootstrap'
```
Puoi anche importare i plug-in JavaScript individualmente secondo necessità per ridurre le dimensioni dei pacchetti:
```
import Alert from 'bootstrap/js/dist/alert';

// or, specify which plugins you need:
import { Tooltip, Toast, Popover } from 'bootstrap';
```
Leggi i nostri documenti JavaScript per ulteriori informazioni su come utilizzare i plugin di Bootstrap.
E hai finito! 🎉 Con i sorgenti Sass e JS di Bootstrap completamente caricati, il tuo server di sviluppo locale dovrebbe ora avere questo aspetto.

Ora puoi iniziare ad aggiungere qualsiasi componente Bootstrap che desideri utilizzare. Assicurati di controllare il progetto di esempio Vite completo per come includere Sass personalizzato aggiuntivo e ottimizzare la tua build importando solo le parti di CSS e JS di Bootstrap di cui hai bisogno.

Vedi qualcosa che non va o non è aggiornato qui? Si prega di aprire un problema su GitHub . Hai bisogno di aiuto per la risoluzione dei problemi? Cerca o avvia una discussione su GitHub.