Treci la conținutul principal Treceți la navigarea documentelor
in English

Construiește instrumente

Aflați cum să utilizați scripturile npm incluse în Bootstrap pentru a construi documentația noastră, a compila codul sursă, a rula teste și multe altele.

Pe aceasta pagina

Configurarea sculelor

Bootstrap folosește scripturi npm pentru sistemul său de construcție. Package.json include metode convenabile de lucru cu cadrul, inclusiv compilarea codului, rularea testelor și multe altele.

Pentru a utiliza sistemul nostru de compilare și a rula documentația noastră la nivel local, veți avea nevoie de o copie a fișierelor sursă Bootstrap și a Node. Urmați acești pași și ar trebui să fiți gata să vă rockați:

  1. Descărcați și instalați Node.js , pe care îl folosim pentru a ne gestiona dependențele.
  2. Fie descărcați sursele Bootstrap, fie accesați depozitul Bootstrap .
  3. Navigați la /bootstrapdirectorul rădăcină și rulați npm installpentru a instala dependențele noastre locale enumerate în package.json .

Când ați terminat, veți putea rula diferitele comenzi furnizate din linia de comandă.

Folosind scripturi npm

Package.json nostru include numeroase sarcini pentru dezvoltarea proiectului. Rulați npm runpentru a vedea toate scripturile npm din terminalul dvs. Sarcinile principale includ:

Sarcină Descriere
npm start Compilează CSS și JavaScript, construiește documentația și pornește un server local.
npm run dist Creează dist/directorul cu fișiere compilate. Necesită Sass , Autoprefixer și Terser .
npm test Rulează teste local după rularenpm run dist
npm run docs-serve Construiește și rulează documentația local.
Începeți cu Bootstrap prin npm cu proiectul nostru de pornire! Mergeți la depozitul de șabloane twbs/bootstrap-npm-starter pentru a vedea cum să construiți și să personalizați Bootstrap în propriul proiect npm. Include compilator Sass, Autoprefixer, Stylelint, PurgeCSS și pictograme Bootstrap.

Sass

Bootstrap folosește Dart Sass pentru compilarea fișierelor noastre sursă Sass în fișiere CSS (incluse în procesul nostru de compilare) și vă recomandăm să faceți același lucru dacă compilați Sass folosind propriul canal de active. Am folosit anterior Node Sass pentru Bootstrap v4, dar LibSass și pachetele construite pe deasupra, inclusiv Node Sass, sunt acum depreciate .

Dart Sass folosește o precizie de rotunjire de 10 și din motive de eficiență nu permite ajustarea acestei valori. Nu scădem această precizie în timpul procesării ulterioare a CSS-ului nostru generat, cum ar fi în timpul minimizării, dar dacă alegeți să faceți acest lucru, vă recomandăm să mențineți o precizie de cel puțin 6 pentru a preveni problemele legate de rotunjirea browserului.

Autoprefixer

Bootstrap folosește Autoprefixer (inclus în procesul nostru de construire) pentru a adăuga automat prefixe de furnizor la unele proprietăți CSS în timpul construirii. Procedând astfel, ne economisim timp și cod, permițându-ne să scriem părți cheie ale CSS-ului nostru o singură dată, eliminând în același timp nevoia de mix-uri de furnizori precum cele găsite în v3.

Menținem lista de browsere acceptate prin Autoprefixer într-un fișier separat din depozitul nostru GitHub. Consultați .browserslistrc pentru detalii.

RTLCSS

Bootstrap folosește RTLCSS pentru a procesa CSS compilat și a le converti în RTL - în principiu, înlocuind proprietățile de direcție orizontală (de ex. padding-left) cu opusul lor. Ne permite să scriem CSS-ul nostru o singură dată și să facem modificări minore folosind directivele de control și valori RTLCSS .

Documentatie locala

Rularea documentației noastre la nivel local necesită utilizarea Hugo, care se instalează prin pachetul hugo-bin npm. Hugo este un generator de site-uri static uluitor de rapid și destul de extensibil, care ne oferă: include de bază, fișiere bazate pe Markdown, șabloane și multe altele. Iată cum să începeți:

  1. Executați configurarea instrumentelor de mai sus pentru a instala toate dependențele.
  2. Din directorul rădăcină /bootstrap, rulați npm run docs-serveîn linia de comandă.
  3. Deschideți http://localhost:9001/în browser și voilà.

Aflați mai multe despre utilizarea Hugo citind documentația acestuia .

Depanare

Dacă întâmpinați probleme cu instalarea dependențelor, dezinstalați toate versiunile anterioare ale dependențelor (global și local). Apoi, reluați npm install.