Bootstrap et Colis

Le guide officiel pour savoir comment inclure et regrouper les CSS et JavaScript de Bootstrap dans votre projet à l'aide de Parcel.

Sur cette page

Vous voulez sauter à la fin ? Téléchargez le code source et la démonstration de travail de ce guide à partir du référentiel twbs/examples . Vous pouvez également ouvrir l'exemple dans StackBlitz mais pas l'exécuter car Parcel n'y est actuellement pas pris en charge.

Installer

Nous construisons un projet Parcel avec Bootstrap à partir de zéro, il y a donc des prérequis et des étapes préalables avant de pouvoir vraiment commencer. Ce guide nécessite que vous ayez installé Node.js et que vous soyez familiarisé avec le terminal.

Créez un dossier de projet et configurez npm. Nous allons créer le my-projectdossier et initialiser npm avec l' -yargument pour éviter qu'il ne nous pose toutes les questions interactives.
```
mkdir my-project && cd my-project
npm init -y
```
Installer Colis. Contrairement à notre guide Webpack, il n'y a qu'une seule dépendance d'outil de construction ici. Parcel installera automatiquement les transformateurs de langue (comme Sass) au fur et à mesure qu'il les détecte. Nous utilisons --save-devpour signaler que cette dépendance est uniquement destinée au développement et non à la production.
```
npm i --save-dev parcel
```
Installez Bootstrap. Nous pouvons maintenant installer Bootstrap. Nous allons également installer Popper puisque nos listes déroulantes, popovers et infobulles en dépendent pour leur positionnement. Si vous ne prévoyez pas d'utiliser ces composants, vous pouvez omettre Popper ici.
```
npm i --save bootstrap @popperjs/core
```

Maintenant que toutes les dépendances nécessaires sont installées, nous pouvons commencer à créer les fichiers de projet et à importer Bootstrap.

Structuration du projet

Nous avons déjà créé le my-projectdossier et initialisé npm. Maintenant, nous allons également créer notre srcdossier, notre feuille de style et notre fichier JavaScript pour compléter la structure du projet. Exécutez ce qui suit à partir de my-projectou créez manuellement la structure de dossiers et de fichiers indiquée ci-dessous.

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

Lorsque vous avez terminé, votre projet complet devrait ressembler à ceci :

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

À ce stade, tout est au bon endroit, mais Parcel a besoin d'une page HTML et d'un script npm pour démarrer notre serveur.

Configurer le colis

Avec les dépendances installées et notre dossier de projet prêt pour que nous commencions à coder, nous pouvons maintenant configurer Parcel et exécuter notre projet localement. Parcel lui-même ne nécessite aucun fichier de configuration par conception, mais nous avons besoin d'un script npm et d'un fichier HTML pour démarrer notre serveur.

Remplissez le src/index.htmldossier. Parcel a besoin d'une page pour s'afficher, nous utilisons donc notre index.htmlpage pour configurer du code HTML de base, y compris nos fichiers CSS et 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>
```
Nous incluons ici un peu de style Bootstrap avec le div class="container"et <button>pour que nous puissions voir quand le CSS de Bootstrap est chargé par Webpack.

Parcel détectera automatiquement que nous utilisons Sass et installera le plugin Sass Parcel pour le prendre en charge. Cependant, si vous le souhaitez, vous pouvez également exécuter manuellement npm i --save-dev @parcel/transformer-sass.
Ajoutez les scripts Parcel npm. Ouvrez le package.jsonet ajoutez le startscript suivant à l' scriptsobjet. Nous utiliserons ce script pour démarrer notre serveur de développement Parcel et afficher le fichier HTML que nous avons créé après sa compilation dans le distrépertoire.
```
{
   // ...
   "scripts": {
     "start": "parcel serve src/index.html --public-url / --dist-dir dist",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   // ...
}
```
Et enfin, nous pouvons démarrer Parcel. Depuis le my-projectdossier de votre terminal, exécutez ce script npm nouvellement ajouté :
```
npm start
```

Dans la prochaine et dernière section de ce guide, nous importerons tous les CSS et JavaScript de Bootstrap.

Importer le bootstrap

L'importation de Bootstrap dans Parcel nécessite deux importations, une dans notre styles.scsset une dans notre fichier main.js.

Importez le CSS de Bootstrap. Ajoutez ce qui suit pour src/scss/styles.scssimporter toutes les sources Sass de Bootstrap.
```
// Import all of Bootstrap's CSS
@import "~bootstrap/scss/bootstrap";
```
Vous pouvez également importer nos feuilles de style individuellement si vous le souhaitez. Lisez nos documents d'importation Sass pour plus de détails.
Importez le JS de Bootstrap. Ajoutez ce qui suit pour src/js/main.jsimporter tout le JS de Bootstrap. Popper sera importé automatiquement via Bootstrap.
```
// Import all of Bootstrap's JS
import * as bootstrap from 'bootstrap'
```
Vous pouvez également importer des plugins JavaScript individuellement selon vos besoins pour limiter la taille des bundles :
```
import Alert from 'bootstrap/js/dist/alert'

// or, specify which plugins you need:
import { Tooltip, Toast, Popover } from 'bootstrap'
```
Lisez nos documents JavaScript pour plus d'informations sur l'utilisation des plugins de Bootstrap.
Et tu as fini! 🎉 Avec les sources Sass et JS de Bootstrap entièrement chargées, votre serveur de développement local devrait maintenant ressembler à ceci.

Vous pouvez maintenant commencer à ajouter tous les composants Bootstrap que vous souhaitez utiliser. Assurez-vous de consulter l'exemple de projet Parcel complet pour savoir comment inclure des Sass personnalisés supplémentaires et optimiser votre build en important uniquement les parties du CSS et du JS de Bootstrap dont vous avez besoin.

Vous voyez quelque chose d'erroné ou d'obsolète ici ? Veuillez ouvrir un problème sur GitHub . Besoin d'aide pour le dépannage ? Recherchez ou démarrez une discussion sur GitHub.