in English

Kujenga zana

Jifunze jinsi ya kutumia hati za npm zilizojumuishwa za Bootstrap ili kuunda hati zetu, kukusanya msimbo wa chanzo, kufanya majaribio, na zaidi.

Mpangilio wa zana

Bootstrap hutumia hati za npm kwa mfumo wake wa ujenzi. Kifurushi chetu.json kinajumuisha mbinu zinazofaa za kufanya kazi na mfumo, ikiwa ni pamoja na kukusanya msimbo, kufanya majaribio, na zaidi.

Ili kutumia mfumo wetu wa ujenzi na kuendesha hati zetu ndani ya nchi, utahitaji nakala ya faili chanzo za Bootstrap na Node. Fuata hatua hizi na unapaswa kuwa tayari kutikisa:

  1. Pakua na usakinishe Node.js , ambayo tunaitumia kudhibiti utegemezi wetu.
  2. Pakua vyanzo vya Bootstrap au hazina ya Bootstrap ya uma .
  3. /bootstrapNenda kwenye saraka ya mizizi na ukimbie npm installkusakinisha vitegemezi vyetu vya ndani vilivyoorodheshwa katika package.json .

Ikikamilika, utaweza kutekeleza amri mbalimbali zinazotolewa kutoka kwa mstari wa amri.

Kutumia maandishi ya npm

Kifurushi chetu.json kinajumuisha amri na kazi zifuatazo:

Kazi Maelezo
npm run dist npm run disthuunda /dist/saraka na faili zilizokusanywa. Hutumia Sass , Autoprefixer , na terser .
npm test Hufanya majaribio ndani ya nchi baada ya kukimbianpm run dist
npm run docs-serve Huunda na kuendesha hati ndani ya nchi.

Endesha npm runili kuona hati zote za npm.

Anza na Bootstrap kupitia npm na mradi wetu wa kuanzisha! Nenda kwenye hazina ya kiolezo cha twbs/bootstrap-npm-starter ili kuona jinsi ya kuunda na kubinafsisha Bootstrap katika mradi wako wa npm. Inajumuisha mkusanyaji wa Sass, Kiambishi Kiotomatiki, Stylelint, PurgeCSS, na Aikoni za Bootstrap.

Sass

Bootstrap v4 hutumia Node Sass kuunda faili zetu za chanzo cha Sass katika faili za CSS (zilizojumuishwa katika mchakato wetu wa ujenzi). Ili kuishia na CSS iliyozalishwa sawa wakati wa kuunda Sass kwa kutumia bomba la mali yako mwenyewe, utahitaji kutumia kikusanyaji cha Sass kinachoauni angalau vipengele ambavyo Node Sass hufanya. Hili ni muhimu kuzingatiwa kwa sababu kuanzia tarehe 26 Oktoba 2020, LibSass na vifurushi vilivyojengwa juu yake—pamoja na Node Sass—vimeacha kutumika .

Iwapo unahitaji vipengele vipya zaidi vya Sass au uoanifu na viwango vipya zaidi vya CSS, Dart Sass sasa ndiyo utekelezwaji msingi wa Sass na inaauni API ya JavaScript ambayo inaafikiana kikamilifu na Node Sass (isipokuwa chache zilizoorodheshwa kwenye ukurasa wa GitHub wa Dart Sass ).

Tunaongeza usahihi wa mzunguko wa Sass hadi 6 (kwa chaguo-msingi, ni 5 katika Node Sass) ili kuzuia masuala ya kuzungusha kivinjari. Ikiwa unatumia Dart Sass hii haitakuwa kitu unachohitaji kurekebisha, kwani mkusanyaji huyo hutumia usahihi wa 10 na kwa sababu za ufanisi hairuhusu kurekebishwa.

Kiambishi kiambishi otomatiki

Bootstrap hutumia Autoprefixer (iliyojumuishwa katika mchakato wetu wa ujenzi) kuongeza kiambishi awali cha muuzaji kwa baadhi ya mali za CSS kwa wakati wa ujenzi. Kufanya hivyo hutuokoa wakati na msimbo kwa kuturuhusu kuandika sehemu muhimu za CSS yetu mara moja huku tukiondoa hitaji la michanganyiko ya wachuuzi kama ile inayopatikana katika v3.

Tunadumisha orodha ya vivinjari vinavyotumika kupitia Autoprefixer katika faili tofauti ndani ya hazina yetu ya GitHub. Tazama .browserslistrc kwa maelezo.

Nyaraka za ndani

Kuendesha hati zetu ndani ya nchi kunahitaji matumizi ya Hugo, ambayo husakinishwa kupitia kifurushi cha hugo-bin npm. Hugo ni jenereta ya tovuti tuli yenye kasi ya ajabu na inayoweza kupanuka kabisa ambayo hutupatia: msingi ni pamoja na, faili zinazotegemea Markdown, violezo, na zaidi. Hivi ndivyo jinsi ya kuianzisha:

  1. Tembea kupitia usanidi wa zana hapo juu ili kusakinisha vitegemezi vyote.
  2. /bootstrapKutoka kwenye saraka ya mizizi , endesha npm run docs-servekwenye mstari wa amri.
  3. Fungua http://localhost:9001/katika kivinjari chako, na voilà.

Jifunze zaidi kuhusu kutumia Hugo kwa kusoma hati zake .

Utatuzi wa shida

Ukikumbana na matatizo ya kusakinisha vitegemezi, sanidua matoleo yote ya awali ya utegemezi (ya kimataifa na ya ndani). Kisha, rudia npm install.