Spring til hovedindhold Spring til dokumentnavigation
in English

Byg værktøjer

Lær, hvordan du bruger Bootstraps inkluderede npm-scripts til at bygge vores dokumentation, kompilere kildekode, køre tests og mere.

På denne side

Værktøjsopsætning

Bootstrap bruger npm-scripts til sit byggesystem. Vores package.json inkluderer praktiske metoder til at arbejde med rammeværket, herunder kompilering af kode, kørsel af tests og mere.

For at bruge vores byggesystem og køre vores dokumentation lokalt, skal du bruge en kopi af Bootstraps kildefiler og Node. Følg disse trin, og du bør være klar til at rocke:

  1. Download og installer Node.js , som vi bruger til at administrere vores afhængigheder.
  2. Enten download Bootstraps kilder eller forgren Bootstraps repository .
  3. Naviger til rodmappen /bootstrapog kør npm installfor at installere vores lokale afhængigheder, der er angivet i package.json .

Når du er færdig, vil du være i stand til at køre de forskellige kommandoer fra kommandolinjen.

Brug af npm scripts

Vores package.json indeholder adskillige opgaver til udvikling af projektet. Kør npm runfor at se alle npm-scripts i din terminal. Primære opgaver omfatter:

Opgave Beskrivelse
npm start Kompilerer CSS og JavaScript, bygger dokumentationen og starter en lokal server.
npm run dist Opretter dist/mappen med kompilerede filer. Kræver Sass , Autoprefixer og terser .
npm test Kører test lokalt efter kørselnpm run dist
npm run docs-serve Opbygger og kører dokumentationen lokalt.
Kom i gang med Bootstrap via npm med vores startprojekt! Gå til twbs/bootstrap-npm-starter skabelonlageret for at se, hvordan du bygger og tilpasser Bootstrap i dit eget npm-projekt. Inkluderer Sass-kompiler, Autoprefixer, Stylelint, PurgeCSS og Bootstrap-ikoner.

Sass

Bootstrap bruger Dart Sass til at kompilere vores Sass-kildefiler til CSS-filer (inkluderet i vores byggeproces), og vi anbefaler, at du gør det samme, hvis du kompilerer Sass ved hjælp af din egen aktivpipeline. Vi brugte tidligere Node Sass til Bootstrap v4, men LibSass og pakker bygget ovenpå, inklusive Node Sass, er nu forældet .

Dart Sass bruger en afrundingspræcision på 10 og tillader af effektivitetsmæssige årsager ikke justering af denne værdi. Vi sænker ikke denne præcision under yderligere behandling af vores genererede CSS, såsom under minifikation, men hvis du vælger at gøre det, anbefaler vi at opretholde en præcision på mindst 6 for at forhindre problemer med browserafrunding.

Autopræfikser

Bootstrap bruger Autoprefixer (inkluderet i vores byggeproces) til automatisk at tilføje leverandørpræfikser til nogle CSS-egenskaber på byggetidspunktet. Det sparer os tid og kode ved at give os mulighed for at skrive vigtige dele af vores CSS en enkelt gang, mens vi eliminerer behovet for leverandørmixins som dem, der findes i v3.

Vi vedligeholder listen over browsere, der understøttes af Autoprefixer, i en separat fil i vores GitHub-lager. Se .browserslistrc for detaljer.

RTLCSS

Bootstrap bruger RTLCSS til at behandle kompilerede CSS og konvertere dem til RTL – i bund og grund erstatter vandrette retningsbevidste egenskaber (f.eks. padding-left) med deres modsatte. Det giver os kun mulighed for at skrive vores CSS en enkelt gang og lave mindre justeringer ved hjælp af RTLCSS -kontrol- og værdidirektiver .

Lokal dokumentation

At køre vores dokumentation lokalt kræver brug af Hugo, som bliver installeret via hugo-bin npm-pakken. Hugo er en lynhurtig og ganske udvidelsesbar statisk webstedsgenerator, der giver os: grundlæggende inkluderer, Markdown-baserede filer, skabeloner og mere. Sådan kommer du i gang:

  1. Kør gennem værktøjsopsætningen ovenfor for at installere alle afhængigheder.
  2. /bootstrapKør npm run docs-servepå kommandolinjen fra rodmappen .
  3. Åbn http://localhost:9001/i din browser, og voilà.

Lær mere om brugen af ​​Hugo ved at læse dens dokumentation .

Fejlfinding

Skulle du støde på problemer med at installere afhængigheder, skal du afinstallere alle tidligere afhængighedsversioner (globale og lokale). Kør derefter igen npm install.