in English

Sukurti įrankius

Sužinokite, kaip naudoti „Bootstrap“ įtrauktus npm scenarijus kuriant mūsų dokumentaciją, kompiliuojant šaltinio kodą, atliekant testus ir kt.

Įrankių sąranka

„ Bootstrap “ savo kūrimo sistemai naudoja npm scenarijus . Mūsų package.json apima patogius darbo su sistema metodus, įskaitant kodo kompiliavimą, testų vykdymą ir kt.

Jei norite naudoti mūsų kūrimo sistemą ir paleisti dokumentaciją vietoje, jums reikės „Bootstrap“ šaltinio failų ir „Node“ kopijos. Atlikite šiuos veiksmus ir būsite pasiruošę sūpuoti:

  1. Atsisiųskite ir įdiekite Node.js , kurią naudojame savo priklausomybėms valdyti.
  2. Atsisiųskite „Bootstrap“ šaltinius arba paleiskite „Bootstrap“ saugyklą .
  3. Eikite į šakninį /bootstrapkatalogą ir paleiskite npm install, kad įdiegtumėte mūsų vietines priklausomybes, nurodytas pakete.json .

Baigę galėsite paleisti įvairias komandas, pateiktas komandinėje eilutėje.

Naudojant npm scenarijus

Mūsų package.json apima šias komandas ir užduotis:

Užduotis apibūdinimas
npm run dist npm run distsukuria /dist/katalogą su kompiliuotais failais. Naudoja Sass , Autoprefixer ir terser .
npm test Po paleidimo atlieka bandymus vietojenpm run dist
npm run docs-serve Kuria ir vykdo dokumentaciją vietoje.

Vykdykite npm run, kad pamatytumėte visus npm scenarijus.

Pradėkite naudoti „Bootstrap“ naudodami „npm“ su mūsų pradedančiuoju projektu! Eikite į twbs/bootstrap-npm-starter šablonų saugyklą ir sužinokite, kaip sukurti ir tinkinti Bootstrap savo npm projekte. Apima Sass kompiliatorių, Autoprefixer, Stylelint, PurgeCSS ir Bootstrap piktogramas.

Sass

Bootstrap v4 naudoja Node Sass , kad kompiliuotų mūsų Sass šaltinio failus į CSS failus (įtraukta į mūsų kūrimo procesą). Kad gautumėte tą patį sugeneruotą CSS kompiliuodami Sass naudodami savo išteklių konvejerį, turėsite naudoti Sass kompiliatorių, palaikantį bent tas funkcijas, kurias palaiko Node Sass. Tai svarbu atkreipti dėmesį, nes nuo 2020 m. spalio 26 d. LibSass ir ant jo sukurti paketai, įskaitant Node Sass, nebenaudojami .

Jei jums reikia naujesnių „Sass“ funkcijų arba suderinamumo su naujesniais CSS standartais, „ Dart Sass “ dabar yra pagrindinis „Sass“ diegimas ir palaiko „JavaScript“ API, visiškai suderinamą su „Node Sass“ (su keliomis išimtimis, nurodytomis „Dart Sass“ GitHub puslapyje ).

Padidiname Sass apvalinimo tikslumą iki 6 (pagal numatytuosius nustatymus Node Sass yra 5), ​​kad išvengtume problemų, susijusių su naršyklės apvalinimu. Jei naudojate „Dart Sass“, tai nereikės koreguoti, nes šis kompiliatorius naudoja 10 apvalinimo tikslumą ir dėl efektyvumo priežasčių jo koreguoti neleidžia.

Automatinis prefiksatorius

„ Bootstrap“ naudoja automatinį prefiksatorių (įtrauktą į mūsų kūrimo procesą), kad kūrimo metu automatiškai pridėtų tiekėjo priešdėlius prie kai kurių CSS ypatybių. Taip sutaupome laiko ir kodo, nes leidžiame vieną kartą parašyti pagrindines CSS dalis ir nereikia naudoti tiekėjų rinkinių, tokių kaip 3 v. versijoje.

„Autoprefixer“ palaikomų naršyklių sąrašą laikome atskirame „GitHub“ saugyklos faile. Daugiau informacijos rasite .browserslistrc .

Vietinė dokumentacija

Norint vykdyti dokumentaciją vietoje, reikia naudoti „Hugo“, kuri įdiegiama per „ hugo-bin npm“ paketą. „Hugo“ yra nepaprastai greitas ir gana išplečiamas statinių svetainių generatorius, suteikiantis mums: pagrindinius, „Markdown“ pagrįstus failus, šablonus ir kt. Štai kaip tai pradėti:

  1. Vykdykite anksčiau pateiktą įrankių sąranką , kad įdiegtumėte visas priklausomybes.
  2. Iš šakninio /bootstrapkatalogo paleiskite npm run docs-servekomandų eilutę.
  3. Atidarykite http://localhost:9001/savo naršyklėje ir galia.

Sužinokite daugiau apie Hugo naudojimą skaitydami jo dokumentaciją .

Problemų sprendimas

Jei kyla problemų diegiant priklausomybes, pašalinkite visas ankstesnes priklausomybių versijas (pasaulinę ir vietinę). Tada paleiskite iš naujo npm install.