in English

Kọ irinṣẹ

Kọ ẹkọ bii o ṣe le lo awọn iwe afọwọkọ npm pẹlu Bootstrap lati kọ iwe wa, ṣajọ koodu orisun, ṣiṣe awọn idanwo, ati diẹ sii.

Eto irinṣẹ

Bootstrap nlo awọn iwe afọwọkọ npm fun eto kikọ rẹ. package.json wa pẹlu awọn ọna irọrun fun ṣiṣẹ pẹlu ilana, pẹlu koodu iṣakojọpọ, awọn idanwo ṣiṣe, ati diẹ sii.

Lati lo eto kikọ wa ati ṣiṣe awọn iwe aṣẹ wa ni agbegbe, iwọ yoo nilo ẹda kan ti awọn faili orisun Bootstrap ati Node. Tẹle awọn igbesẹ wọnyi ati pe o yẹ ki o ṣetan lati rọ:

  1. Ṣe igbasilẹ ati fi Node.js sori ẹrọ , eyiti a lo lati ṣakoso awọn igbẹkẹle wa.
  2. Boya ṣe igbasilẹ awọn orisun Bootstrap tabi ibi ipamọ Bootstrap orita .
  3. Lilö kiri si itọsọna root /bootstrapati ṣiṣe npm installlati fi sori ẹrọ awọn igbẹkẹle agbegbe wa ti a ṣe akojọ si ni package.json .

Nigbati o ba pari, iwọ yoo ni anfani lati ṣiṣe awọn oriṣiriṣi awọn aṣẹ ti a pese lati laini aṣẹ.

Lilo awọn iwe afọwọkọ npm

package.json wa pẹlu awọn aṣẹ wọnyi ati awọn iṣẹ ṣiṣe:

Iṣẹ-ṣiṣe Apejuwe
npm run dist npm run distṣẹda awọn /dist/liana pẹlu compiled faili. Nlo Sass , Autoprefixer , ati terser .
npm test Ṣiṣe awọn idanwo ni agbegbe lẹhin ṣiṣenpm run dist
npm run docs-serve Kọ ati ṣiṣe awọn iwe aṣẹ ni agbegbe.

Ṣiṣe npm runlati wo gbogbo awọn iwe afọwọkọ npm.

Bẹrẹ pẹlu Bootstrap nipasẹ npm pẹlu iṣẹ ibẹrẹ wa! Ori si ibi ipamọ awoṣe twbs/bootstrap-npm-starter lati wo bi o ṣe le kọ ati ṣe akanṣe Bootstrap ninu iṣẹ akanṣe npm tirẹ. Pẹlu alakojo Sass, Autoprefixer, Stylelint, PurgeCSS, ati Awọn aami Bootstrap.

Sass

Bootstrap v4 nlo Node Sass fun iṣakojọpọ awọn faili orisun Sass wa sinu awọn faili CSS (ti o wa ninu ilana kikọ wa). Lati le pari pẹlu CSS ti ipilẹṣẹ kanna nigbati o ba n ṣajọ Sass nipa lilo opo gigun ti epo ti dukia, iwọ yoo nilo lati lo akopọ Sass kan ti o ṣe atilẹyin o kere ju awọn ẹya ti Node Sass ṣe. Eyi ṣe pataki lati ṣe akiyesi nitori ni Oṣu Kẹwa Ọjọ 26, Ọdun 2020, LibSass ati awọn idii ti a ṣe si oke rẹ—pẹlu Node Sass—ti fagilẹ .

Ti o ba nilo awọn ẹya Sass tuntun tabi ibamu pẹlu awọn iṣedede CSS tuntun, Dart Sass ni bayi imuse akọkọ ti Sass ati atilẹyin JavaScript API ti o ni ibamu ni kikun pẹlu Node Sass (pẹlu awọn imukuro diẹ ti a ṣe akojọ lori oju-iwe GitHub Dart Sass ).

A pọ si konge iyipo Sass si 6 (nipa aiyipada, o jẹ 5 ni Node Sass) lati yago fun awọn ọran pẹlu iyipo aṣawakiri. Ti o ba lo Dart Sass eyi kii yoo jẹ nkan ti o nilo lati ṣatunṣe, nitori pe alakojo naa nlo iwọn konge ti 10 ati fun awọn idi ṣiṣe ko gba laaye lati ṣatunṣe.

Asọtẹlẹ adaṣe

Bootstrap nlo Autoprefixer (ti o wa ninu ilana kikọ wa) lati ṣafikun awọn ami-iṣaaju ataja si diẹ ninu awọn ohun-ini CSS ni akoko kikọ. Ṣiṣe bẹ ṣafipamọ akoko ati koodu wa nipa gbigba wa laaye lati kọ awọn apakan pataki ti CSS wa ni akoko kan lakoko imukuro iwulo fun awọn apopọ ataja bii awọn ti a rii ni v3.

A ṣetọju atokọ ti awọn aṣawakiri ti o ni atilẹyin nipasẹ Autoprefixer ni faili lọtọ laarin ibi ipamọ GitHub wa. Wo .browserslistrc fun awọn alaye.

Awọn iwe aṣẹ agbegbe

Ṣiṣe awọn iwe aṣẹ wa ni agbegbe nilo lilo Hugo, eyiti o fi sii nipasẹ package hugo -bin npm. Hugo jẹ iyara gbigbona ati olupilẹṣẹ aaye aimi pupọ ti o pese wa: ipilẹ pẹlu, awọn faili ti o da lori Markdown, awọn awoṣe, ati diẹ sii. Eyi ni bii o ṣe le bẹrẹ:

  1. Ṣiṣe nipasẹ iṣeto irinṣẹ loke lati fi sori ẹrọ gbogbo awọn igbẹkẹle.
  2. Lati awọn root /bootstrapliana, ṣiṣe npm run docs-serveawọn ni awọn pipaṣẹ ila.
  3. Ṣii http://localhost:9001/ninu ẹrọ aṣawakiri rẹ, ati voil.

Kọ ẹkọ diẹ sii nipa lilo Hugo nipa kika iwe rẹ .

Laasigbotitusita

Ti o ba pade awọn iṣoro pẹlu fifi sori ẹrọ awọn igbẹkẹle, aifi si gbogbo awọn ẹya igbẹkẹle iṣaaju (agbaye ati agbegbe). Lẹhinna, tun ṣe npm install.