Ga naar hoofdinhoud Ga naar navigatie in documenten
in English

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.

Op deze pagina

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:

  1. Download en installeer Node.js , die we gebruiken om onze afhankelijkheden te beheren.
  2. Download de bronnen van Bootstrap of fork de repository van Bootstrap .
  3. 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

Ons package.json bevat tal van taken voor het ontwikkelen van het project. Uitvoeren npm runom alle npm-scripts in uw terminal te zien. Primaire taken zijn onder meer:

Taak Beschrijving
npm start Compileert CSS en JavaScript, bouwt de documentatie op en start een lokale server.
npm run dist Creëert de dist/directory met gecompileerde bestanden. Vereist Sass , Autoprefixer en terser .
npm test Voert tests lokaal uit na het uitvoerennpm run dist
npm run docs-serve Bouwt en voert de documentatie lokaal uit.
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 gebruikt Dart Sass voor het compileren van onze Sass-bronbestanden in CSS-bestanden (inbegrepen in ons bouwproces), en we raden u aan hetzelfde te doen als u Sass compileert met uw eigen activapijplijn. We gebruikten eerder Node Sass voor Bootstrap v4, maar LibSass en pakketten die daarop zijn gebouwd, inclusief Node Sass, zijn nu verouderd .

Dart Sass gebruikt een afrondingsnauwkeurigheid van 10 en staat om efficiëntieredenen geen aanpassing van deze waarde toe. We verlagen deze precisie niet tijdens verdere verwerking van onze gegenereerde CSS, zoals tijdens verkleining, maar als je ervoor kiest om dit te doen, raden we aan een precisie van ten minste 6 te behouden om problemen met browserafronding te voorkomen.

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.

RTLCSS

Bootstrap gebruikt RTLCSS om gecompileerde CSS te verwerken en ze naar RTL te converteren – waarbij in feite horizontale richtingsbewuste eigenschappen (bijv. padding-left) worden vervangen door hun tegengestelde. Hiermee kunnen we onze CSS slechts één keer schrijven en kleine aanpassingen maken met behulp van RTLCSS -besturings- en waarderichtlijnen .

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:

  1. Doorloop de bovenstaande tooling-instellingen om alle afhankelijkheden te installeren.
  2. /bootstrapVoer vanuit de hoofdmap uit npm run docs-servein de opdrachtregel.
  3. 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.