in English

Bumuo ng mga tool

Matutunan kung paano gamitin ang mga kasamang npm script ng Bootstrap upang buuin ang aming dokumentasyon, i-compile ang source code, magpatakbo ng mga pagsubok, at higit pa.

Pag-setup ng tool

Gumagamit ang Bootstrap ng mga npm script para sa build system nito. Kasama sa aming package.json ang mga maginhawang pamamaraan para sa pagtatrabaho sa framework, kabilang ang pag-compile ng code, pagpapatakbo ng mga pagsubok, at higit pa.

Para magamit ang aming build system at lokal na patakbuhin ang aming dokumentasyon, kakailanganin mo ng kopya ng mga source file at Node ng Bootstrap. Sundin ang mga hakbang na ito at dapat ay handa ka nang mag-rock:

  1. I-download at i-install ang Node.js , na ginagamit namin upang pamahalaan ang aming mga dependency.
  2. Alinman sa i -download ang mga pinagmumulan ng Bootstrap o tinidor ang repositoryo ng Bootstrap .
  3. Mag-navigate sa root /bootstrapdirectory at tumakbo npm installpara i-install ang aming mga lokal na dependency na nakalista sa package.json .

Kapag nakumpleto na, magagawa mong patakbuhin ang iba't ibang mga command na ibinigay mula sa command line.

Gamit ang mga script ng npm

Kasama sa aming package.json ang mga sumusunod na command at gawain:

Gawain Paglalarawan
npm run dist npm run distlumilikha ng /dist/direktoryo na may pinagsama-samang mga file. Gumagamit ng Sass , Autoprefixer , at terser .
npm test Nagpapatakbo ng mga pagsubok nang lokal pagkatapos tumakbonpm run dist
npm run docs-serve Binubuo at pinapatakbo ang dokumentasyon nang lokal.

Patakbuhin npm runupang makita ang lahat ng mga script ng npm.

Magsimula sa Bootstrap sa pamamagitan ng npm gamit ang aming panimulang proyekto! Pumunta sa twbs/bootstrap-npm-starter template repository para makita kung paano bumuo at mag-customize ng Bootstrap sa sarili mong npm project. May kasamang Sass compiler, Autoprefixer, Stylelint, PurgeCSS, at Bootstrap Icon.

Sass

Gumagamit ang Bootstrap v4 ng Node Sass para sa pag-compile ng aming Sass source file sa mga CSS file (kasama sa aming proseso ng pagbuo). Upang magkaroon ng parehong nabuong CSS kapag kino-compile ang Sass gamit ang iyong sariling asset pipeline, kakailanganin mong gumamit ng Sass compiler na sumusuporta sa kahit man lang sa mga feature na ginagawa ng Node Sass. Mahalaga itong tandaan dahil simula noong Oktubre 26, 2020, ang LibSass at mga package na binuo sa ibabaw nito—kabilang ang Node Sass—ay hindi na ginagamit .

Kung kailangan mo ng mas bagong feature ng Sass o compatibility sa mas bagong CSS standards, Dart Sass na ngayon ang pangunahing pagpapatupad ng Sass at sinusuportahan ang JavaScript API na ganap na compatible sa Node Sass (na may ilang mga exception na nakalista sa GitHub page ng Dart Sass ).

Dinaragdagan namin ang katumpakan ng pag-round ng Sass sa 6 (bilang default, ito ay 5 sa Node Sass) upang maiwasan ang mga isyu sa pag-round ng browser. Kung gagamit ka ng Dart Sass hindi ito isang bagay na kailangan mong ayusin, dahil ang compiler na iyon ay gumagamit ng rounding precision na 10 at para sa mga dahilan ng kahusayan ay hindi ito pinapayagang ayusin.

Autoprefixer

Gumagamit ang Bootstrap ng Autoprefixer (kasama sa aming proseso ng pagbuo) upang awtomatikong magdagdag ng mga prefix ng vendor sa ilang mga katangian ng CSS sa oras ng pagbuo. Ang paggawa nito ay nakakatipid sa amin ng oras at code sa pamamagitan ng pagpapahintulot sa amin na magsulat ng mga mahahalagang bahagi ng aming CSS nang isang beses habang inaalis ang pangangailangan para sa mga mixin ng vendor tulad ng makikita sa v3.

Pinapanatili namin ang listahan ng mga browser na sinusuportahan sa pamamagitan ng Autoprefixer sa isang hiwalay na file sa loob ng aming GitHub repository. Tingnan ang .browserslistrc para sa mga detalye.

Lokal na dokumentasyon

Ang pagpapatakbo ng aming dokumentasyon nang lokal ay nangangailangan ng paggamit ng Hugo, na na-install sa pamamagitan ng hugo-bin npm package. Ang Hugo ay isang napakabilis at medyo napapalawak na static na site generator na nagbibigay sa amin ng: basic na kinabibilangan, Markdown-based na mga file, template, at higit pa. Narito kung paano ito sisimulan:

  1. Patakbuhin ang tooling setup sa itaas upang i-install ang lahat ng dependencies.
  2. Mula sa root /bootstrapdirectory, tumakbo npm run docs-servesa command line.
  3. Buksan http://localhost:9001/sa iyong browser, at voilà.

Matuto nang higit pa tungkol sa paggamit kay Hugo sa pamamagitan ng pagbabasa ng dokumentasyon nito .

Pag-troubleshoot

Kung makatagpo ka ng mga problema sa pag-install ng mga dependency, i-uninstall ang lahat ng nakaraang bersyon ng dependency (global at lokal). Pagkatapos, muling ipalabas npm install.