Colis

Découvrez comment inclure Bootstrap dans votre projet à l'aide de Parcel.

Sur cette page

Installer le colis

Installer Bootstrap

Installez bootstrap en tant que module Node.js à l'aide de npm.

Bootstrap dépend de Popper , qui est spécifié dans la peerDependenciespropriété. Cela signifie que vous devrez vous assurer de les ajouter tous les deux à votre package.jsonutilisation npm install @popperjs/core.

Quand tout sera terminé, votre projet sera structuré comme ceci :

project-name/
├── build/
├── node_modules/
│   └── bootstrap/
│   └── popper.js/
├── scss/
│   └── custom.scss
├── src/
│   └── index.html
│   └── index.js
└── package.json

Importation de JavaScript

Importez le JavaScript de Bootstrap dans le point d'entrée de votre application (généralement src/index.js). Vous pouvez importer tous nos plugins dans un seul fichier ou séparément si vous n'en avez besoin que d'un sous-ensemble.

// Import all plugins
import * as bootstrap from 'bootstrap';

// Or import only needed plugins
import { Tooltip as Tooltip, Toast as Toast, Popover as Popover } from 'bootstrap';

// Or import just one
import Alert as Alert from '../node_modules/bootstrap/js/dist/alert';

Importation de CSS

Pour utiliser tout le potentiel de Bootstrap et le personnaliser selon vos besoins, utilisez les fichiers source dans le cadre du processus de regroupement de votre projet.

Créez le vôtre scss/custom.scsspour importer les fichiers Sass de Bootstrap, puis remplacez les variables personnalisées intégrées .

Créer une application

Inclure avant la balise src/index.jsfermante .</body>

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>
  <body>
    <script src="./index.js"></script>
  </body>
</html>

Éditer`package.json`

Ajoutez devet buildscripts dans votre package.jsonfichier.

"scripts": {
  "dev": "parcel ./src/index.html",
  "prebuild": "npx rimraf build",
  "build": "parcel build --public-url ./ ./src/index.html --experimental-scope-hoisting --out-dir build"
}

Exécuter le script de développement

Votre application sera accessible sur http://127.0.0.1:1234.

npm run dev

Créer des fichiers d'application

Les fichiers construits sont dans le build/dossier.

npm run build