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.

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 følgende kommandoer og opgaver:

Opgave Beskrivelse
npm run dist npm run distopretter /dist/mappen med kompilerede filer. Bruger 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.

Kør npm runfor at se alle npm-scripts.

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 v4 bruger Node Sass til at kompilere vores Sass-kildefiler til CSS-filer (inkluderet i vores byggeproces). For at ende med den samme genererede CSS, når du kompilerer Sass ved hjælp af din egen asset-pipeline, skal du bruge en Sass-compiler, der i det mindste understøtter de funktioner, som Node Sass gør. Dette er vigtigt at bemærke, fordi fra den 26. oktober 2020 er LibSass og pakker bygget oven på det – inklusive Node Sass – forældet .

Hvis du har brug for nyere Sass-funktioner eller kompatibilitet med nyere CSS-standarder, er Dart Sass nu den primære implementering af Sass og understøtter en JavaScript API, der er fuldt ud kompatibel med Node Sass (med nogle få undtagelser angivet på Dart Sass's GitHub-side ).

Vi øger Sass-afrundingspræcisionen til 6 (som standard er den 5 i Node Sass) for at forhindre problemer med browserafrunding. Hvis du bruger Dart Sass, er dette ikke noget, du behøver at justere, da den compiler bruger en afrundingspræcision på 10 og af effektivitetsgrunde ikke tillader, at den justeres.

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.

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.