in English

Adeiladu offer

Dysgwch sut i ddefnyddio sgriptiau npm wedi'u cynnwys gan Bootstrap i adeiladu ein dogfennaeth, llunio cod ffynhonnell, cynnal profion, a mwy.

Gosodiad offer

Mae Bootstrap yn defnyddio sgriptiau npm ar gyfer ei system adeiladu. Mae ein pecyn.json yn cynnwys dulliau cyfleus ar gyfer gweithio gyda'r fframwaith, gan gynnwys llunio cod, rhedeg profion, a mwy.

I ddefnyddio ein system adeiladu a rhedeg ein dogfennaeth yn lleol, bydd angen copi o ffeiliau ffynhonnell Bootstrap a Node arnoch. Dilynwch y camau hyn a dylech fod yn barod i siglo:

  1. Lawrlwythwch a gosodwch Node.js , a ddefnyddiwn i reoli ein dibyniaethau.
  2. Naill ai lawrlwythwch ffynonellau Bootstrap neu fforchiwch ystorfa Bootstrap .
  3. Llywiwch i'r /bootstrapcyfeiriadur gwraidd a rhedeg npm installi osod ein dibyniaethau lleol a restrir yn package.json .

Ar ôl ei gwblhau, byddwch yn gallu rhedeg y gwahanol orchmynion a ddarperir o'r llinell orchymyn.

Defnyddio sgriptiau npm

Mae ein pecyn.json yn cynnwys y gorchmynion a'r tasgau canlynol:

Tasg Disgrifiad
npm run dist npm run distyn creu'r /dist/cyfeiriadur gyda ffeiliau wedi'u llunio. Yn defnyddio Sass , Autoprefixer , a terser .
npm test Yn rhedeg profion yn lleol ar ôl rhedegnpm run dist
npm run docs-serve Adeiladu a rhedeg y ddogfennaeth yn lleol.

Rhedeg npm runi weld yr holl sgriptiau npm.

Dechreuwch gyda Bootstrap trwy npm gyda'n prosiect cychwynnol! Ewch i ystorfa templedi twbs/bootstrap-npm-starter i weld sut i adeiladu ac addasu Bootstrap yn eich prosiect npm eich hun. Yn cynnwys Sass compiler, Autoprefixer, Stylelint, PurgeCSS, ac Eiconau Bootstrap.

Sass

Mae Bootstrap v4 yn defnyddio Node Sass ar gyfer llunio ein ffeiliau ffynhonnell Sass yn ffeiliau CSS (wedi'u cynnwys yn ein proses adeiladu). Er mwyn cael yr un CSS a gynhyrchir yn y pen draw wrth lunio Sass gan ddefnyddio'ch piblinell asedau eich hun, bydd angen i chi ddefnyddio casglwr Sass sy'n cefnogi o leiaf y nodweddion y mae Node Sass yn eu gwneud. Mae hyn yn bwysig i'w nodi oherwydd ar 26 Hydref, 2020, mae LibSass a phecynnau a adeiladwyd ar ei ben - gan gynnwys Node Sass - yn anghymeradwy .

Os oes angen nodweddion Sass mwy newydd arnoch neu gydnaws â safonau CSS mwy newydd, Dart Sass bellach yw prif weithrediad Sass ac mae'n cefnogi API JavaScript sy'n gwbl gydnaws â Node Sass (gydag ychydig o eithriadau a restrir ar dudalen GitHub Dart Sass ).

Rydym yn cynyddu cywirdeb talgrynnu Sass i 6 (yn ddiofyn, mae'n 5 yn Node Sass) i atal problemau gyda thalgrynnu porwr. Os ydych yn defnyddio Dart Sass ni fydd hyn yn rhywbeth y mae angen i chi ei addasu, gan fod y casglwr hwnnw'n defnyddio trachywiredd talgrynnu o 10 ac am resymau effeithlonrwydd nid yw'n caniatáu iddo gael ei addasu.

Autoprefixer

Mae Bootstrap yn defnyddio Autoprefixer (wedi'i gynnwys yn ein proses adeiladu) i ychwanegu rhagddodiaid gwerthwyr yn awtomatig i rai eiddo CSS ar amser adeiladu. Mae gwneud hynny yn arbed amser a chod i ni trwy ganiatáu i ni ysgrifennu rhannau allweddol o'n CSS un tro tra'n dileu'r angen am gymysgeddau gwerthwyr fel y rhai a geir yn v3.

Rydym yn cynnal y rhestr o borwyr a gefnogir trwy Autoprefixer mewn ffeil ar wahân yn ein cadwrfa GitHub. Gweler .browserslistrc am fanylion.

Dogfennaeth leol

Er mwyn rhedeg ein dogfennaeth yn lleol mae angen defnyddio Hugo, sy'n cael ei osod trwy'r pecyn hugo-bin npm. Mae Hugo yn gynhyrchydd gwefan sefydlog syfrdanol o gyflym ac eithaf estynadwy sy'n darparu i ni: sylfaenol yn cynnwys, ffeiliau yn seiliedig ar Markdown, templedi, a mwy. Dyma sut i roi cychwyn arni:

  1. Rhedwch trwy'r gosodiad offer uchod i osod pob dibyniaeth.
  2. /bootstrapO'r cyfeiriadur gwraidd , rhedeg npm run docs-serveyn y llinell orchymyn.
  3. Agorwch http://localhost:9001/yn eich porwr, a voilà.

Dysgwch fwy am ddefnyddio Hugo trwy ddarllen ei ddogfennaeth .

Datrys problemau

Os cewch chi broblemau gyda gosod dibyniaethau, dadosodwch yr holl fersiynau dibyniaeth blaenorol (byd-eang a lleol). Yna, ail-redeg npm install.