Construire des outils
Apprenez à utiliser les scripts npm inclus dans Bootstrap pour créer notre documentation, compiler le code source, exécuter des tests, etc.
Configuration de l'outillage
Bootstrap utilise des scripts npm pour son système de construction. Notre package.json inclut des méthodes pratiques pour travailler avec le framework, y compris la compilation de code, l'exécution de tests, etc.
Pour utiliser notre système de construction et exécuter notre documentation localement, vous aurez besoin d'une copie des fichiers source de Bootstrap et de Node. Suivez ces étapes et vous devriez être prêt à basculer :
- Téléchargez et installez Node.js , que nous utilisons pour gérer nos dépendances.
- Téléchargez les sources de Bootstrap ou bifurquez le référentiel de Bootstrap .
- Accédez au
/bootstrap
répertoire racine et exécuteznpm install
pour installer nos dépendances locales répertoriées dans package.json .
Une fois terminé, vous pourrez exécuter les différentes commandes fournies à partir de la ligne de commande.
Utiliser des scripts npm
Notre package.json comprend de nombreuses tâches pour développer le projet. Exécutez npm run
pour voir tous les scripts npm dans votre terminal. Les tâches principales incluent :
Tâche | La description |
---|---|
npm start |
Compile CSS et JavaScript, construit la documentation et démarre un serveur local. |
npm run dist |
Crée le dist/ répertoire avec les fichiers compilés. Requiert Sass , Autoprefixer et terser . |
npm test |
Exécute les tests localement après l'exécutionnpm run dist |
npm run docs-serve |
Construit et exécute la documentation localement. |
Toupet
Bootstrap utilise Dart Sass pour compiler nos fichiers source Sass en fichiers CSS (inclus dans notre processus de construction), et nous vous recommandons de faire de même si vous compilez Sass en utilisant votre propre pipeline d'actifs. Nous utilisions auparavant Node Sass pour Bootstrap v4, mais LibSass et les packages construits dessus, y compris Node Sass, sont désormais obsolètes .
Dart Sass utilise une précision d'arrondi de 10 et pour des raisons d'efficacité ne permet pas d'ajuster cette valeur. Nous ne réduisons pas cette précision lors du traitement ultérieur de notre CSS généré, comme lors de la minification, mais si vous choisissez de le faire, nous vous recommandons de maintenir une précision d'au moins 6 pour éviter les problèmes d'arrondi du navigateur.
Préfixe automatique
Bootstrap utilise Autoprefixer (inclus dans notre processus de construction) pour ajouter automatiquement des préfixes de fournisseur à certaines propriétés CSS au moment de la construction. Cela nous fait gagner du temps et du code en nous permettant d'écrire des parties clés de notre CSS une seule fois tout en éliminant le besoin de mixins de fournisseurs comme ceux trouvés dans la v3.
Nous maintenons la liste des navigateurs pris en charge via Autoprefixer dans un fichier séparé au sein de notre référentiel GitHub. Voir .browserslistrc pour plus de détails.
RTLCSS
Bootstrap utilise RTLCSS pour traiter les CSS compilés et les convertir en RTL - en remplaçant essentiellement les propriétés sensibles à la direction horizontale (par exemple, padding-left
) par leur contraire. Cela nous permet d'écrire notre CSS une seule fois et d'apporter des modifications mineures à l'aide des directives de contrôle et de valeur RTLCSS .
Documentation locale
L'exécution de notre documentation localement nécessite l'utilisation de Hugo, qui est installé via le package npm hugo-bin . Hugo est un générateur de site statique extrêmement rapide et assez extensible qui nous fournit : des inclusions de base, des fichiers basés sur Markdown, des modèles, etc. Voici comment démarrer :
- Parcourez la configuration des outils ci-dessus pour installer toutes les dépendances.
- Depuis le répertoire racine
/bootstrap
, exécuteznpm run docs-serve
la ligne de commande. - Ouvrez
http://localhost:9001/
dans votre navigateur, et voilà.
Apprenez-en plus sur l'utilisation d'Hugo en lisant sa documentation .
Dépannage
Si vous rencontrez des problèmes lors de l'installation des dépendances, désinstallez toutes les versions de dépendance précédentes (globales et locales). Ensuite, relancez npm install
.