Parcel (colis)
Découvrez comment inclure Bootstrap dans votre projet à l'aide de Parcel (colis).
Installer le colis
Installer Parcel Bundler.
Installer Bootstrap
Installer bootstrap en tant que module Node.js à l'aide de npm.
Bootstrap dépend de Popper, qui est spécifié dans la peerDependencies propriété. Cela signifie que vous devrez vous assurer de les ajouter tous les deux à votre package.json utilisation 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.php
│ └── index.js
└── package.json
Importation de JavaScript
Importez Bootstrap’s JavaScript 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.scss pour importer les fichiers Sass de Bootstrap puis remplacez les variables personnalisées intégrées.
Créer une application
Inclure src/index.js avant la balise fermante </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>
Editer package.json
Ajoutez dev et build scripts dans votre package.json fichier.
"scripts": {
"dev": "parcel ./src/index.php",
"prebuild": "npx rimraf build",
"build": "parcel build --public-url ./ ./src/index.php --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