Hulpmiddelen bouwen

Leer hoe u de meegeleverde npm-scripts van Bootstrap kunt gebruiken om onze documentatie te bouwen, de broncode te compileren, tests uit te voeren en meer.

Gereedschapsconfiguratie

Bootstrap gebruikt npm-scripts voor zijn bouwsysteem. Onze package.json bevat handige methoden om met het framework te werken, waaronder het compileren van code, het uitvoeren van tests en meer.

Om ons buildsysteem te gebruiken en onze documentatie lokaal uit te voeren, heb je een kopie van Bootstrap's bronbestanden en Node nodig. Volg deze stappen en je zou klaar moeten zijn om te rocken:

Download en installeer Node.js , die we gebruiken om onze afhankelijkheden te beheren.
Download de bronnen van Bootstrap of fork de repository van Bootstrap .
Navigeer naar de hoofdmap /bootstrapen voer npm installdeze uit om onze lokale afhankelijkheden te installeren die worden vermeld in package.json .

Als u klaar bent, kunt u de verschillende opdrachten uitvoeren vanaf de opdrachtregel.

Npm-scripts gebruiken

Onze package.json bevat de volgende opdrachten en taken:

Taak	Beschrijving
`npm run dist`	`npm run dist`maakt de `/dist/`map met gecompileerde bestanden. Gebruikt Sass , Autoprefixer en Terser .
`npm test`	Voert tests lokaal uit na het uitvoeren`npm run dist`
`npm run docs-serve`	Bouwt en voert de documentatie lokaal uit.

Uitvoeren npm runom alle npm-scripts te zien.

Ga aan de slag met Bootstrap via npm met ons startersproject! Ga naar de twbs/bootstrap-npm-starter sjabloonrepository om te zien hoe u Bootstrap in uw eigen npm-project kunt bouwen en aanpassen. Bevat Sass-compiler, Autoprefixer, Stylelint, PurgeCSS en Bootstrap-pictogrammen.

Sass

Bootstrap v4 gebruikt Node Sass voor het compileren van onze Sass-bronbestanden in CSS-bestanden (opgenomen in ons bouwproces). Om te eindigen met dezelfde gegenereerde CSS bij het compileren van Sass met behulp van uw eigen activapijplijn, moet u een Sass-compiler gebruiken die ten minste de functies ondersteunt die Node Sass doet. Dit is belangrijk om op te merken, want met ingang van 26 oktober 2020 zijn LibSass en pakketten die erop zijn gebouwd, inclusief Node Sass, verouderd .

Als je nieuwere Sass-functies of compatibiliteit met nieuwere CSS-standaarden nodig hebt, is Dart Sass nu de primaire implementatie van Sass en ondersteunt het een JavaScript-API die volledig compatibel is met Node Sass (met een paar uitzonderingen vermeld op de GitHub-pagina van Dart Sass ).

We verhogen de Sass-afrondingsprecisie naar 6 (standaard is dit 5 in Node Sass) om problemen met browserafronding te voorkomen. Als u Dart Sass gebruikt, hoeft u dit niet aan te passen, omdat die compiler een afrondingsprecisie van 10 gebruikt en deze vanwege efficiëntieredenen niet kan worden aangepast.

Autoprefixer

Bootstrap gebruikt Autoprefixer (inbegrepen in ons bouwproces) om tijdens het bouwen automatisch leveranciersvoorvoegsels toe te voegen aan sommige CSS-eigenschappen. Door dit te doen, besparen we tijd en code doordat we de belangrijkste delen van onze CSS in één keer kunnen schrijven, terwijl we de noodzaak voor leveranciersmixins zoals die in v3.

We houden de lijst met browsers die worden ondersteund door Autoprefixer bij in een apart bestand in onze GitHub-repository. Zie .browserslistrc voor details.

Lokale documentatie

Het lokaal uitvoeren van onze documentatie vereist het gebruik van Hugo, dat wordt geïnstalleerd via het hugo-bin npm-pakket. Hugo is een razendsnelle en vrij uitbreidbare statische sitegenerator die ons biedt: basis omvat, op Markdown gebaseerde bestanden, sjablonen en meer. Hier leest u hoe u eraan begint:

Doorloop de bovenstaande tooling-instellingen om alle afhankelijkheden te installeren.
/bootstrapVoer vanuit de hoofdmap uit npm run docs-servein de opdrachtregel.
Open http://localhost:9001/in uw browser en voilà.

Leer meer over het gebruik van Hugo door de documentatie te lezen .

Probleemoplossen

Als u problemen ondervindt met het installeren van afhankelijkheden, verwijder dan alle eerdere versies van afhankelijkheid (algemeen en lokaal). Daarna opnieuw uitvoeren npm install.