Colis
Découvrez comment inclure Bootstrap dans votre projet à l'aide de Parcel.
Installer le colis
Installez Colis Bundler .
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 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.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.scss
pour 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.js
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>
Éditerpackage.json
Ajoutez dev
et build
scripts dans votre package.json
fichier.
"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