Bootstrap e pacco

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

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 ma non eseguirlo perché Parcel non è attualmente supportato lì.

Impostare

Stiamo costruendo da zero un progetto Parcel 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 pacco. A differenza della nostra guida Webpack, qui c'è solo una singola dipendenza dello strumento di compilazione. Parcel installerà automaticamente i trasformatori di lingua (come Sass) man mano che li rileva. Usiamo --save-devper segnalare che questa dipendenza è solo per uso di sviluppo e non per produzione.
```
npm i --save-dev parcel
```
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
```

Ora che abbiamo installato tutte le dipendenze necessarie, 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

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

A questo punto, tutto è al posto giusto, ma Parcel ha bisogno di una pagina HTML e di uno script npm per avviare il nostro server.

Configura pacco

Con le dipendenze installate e la nostra cartella del progetto pronta per iniziare la codifica, ora possiamo configurare Parcel ed eseguire il nostro progetto localmente. Il pacco stesso non richiede un file di configurazione in base alla progettazione, ma abbiamo bisogno di uno script npm e di un file HTML per avviare il nostro server.

Compila il src/index.htmlfile. Parcel ha bisogno di una pagina per il rendering, quindi utilizziamo la nostra index.htmlpagina per impostare alcuni HTML di base, inclusi i nostri file CSS e JavaScript.
```
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap w/ Parcel</title>
    <link rel="stylesheet" href="scss/styles.scss">
    <script type="module" src="js/main.js"></script>
  </head>
  <body>
    <div class="container py-4 px-3 mx-auto">
      <h1>Hello, Bootstrap and Parcel!</h1>
      <button class="btn btn-primary">Primary button</button>
    </div>
  </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 Webpack.

Parcel rileverà automaticamente che stiamo utilizzando Sass e installerà il plug-in Sass Parcel per supportarlo. Tuttavia, se lo desideri, puoi anche eseguire manualmente npm i --save-dev @parcel/transformer-sass.
Aggiungi gli script Parcel npm. Aprire package.jsone aggiungere il seguente startscript scriptsall'oggetto. Useremo questo script per avviare il nostro server di sviluppo Parcel e renderizzare il file HTML che abbiamo creato dopo che è stato compilato nella distdirectory.
```
{
   // ...
   "scripts": {
     "start": "parcel serve src/index.html --public-url / --dist-dir dist",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   // ...
}
```
E infine, possiamo avviare Parcel. 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

L'importazione di Bootstrap in Parcel richiede due importazioni, una nel nostro styles.scsse una nel nostro main.js.

Importa 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.
Importa JS di Bootstrap. Aggiungi quanto segue per src/js/main.jsimportare tutti i JS di Bootstrap. Popper verrà importato automaticamente tramite Bootstrap.
```
// 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 Parcel 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.