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ọ:
- Ṣe igbasilẹ ati fi Node.js sori ẹrọ , eyiti a lo lati ṣakoso awọn igbẹkẹle wa.
- Boya ṣe igbasilẹ awọn orisun Bootstrap tabi ibi ipamọ Bootstrap orita .
- Lilö kiri si itọsọna root
/bootstrapati ṣiṣenpm 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 iṣẹ ṣiṣe lọpọlọpọ fun idagbasoke iṣẹ akanṣe naa. Ṣiṣe npm runlati wo gbogbo awọn iwe afọwọkọ npm ni ebute rẹ. Awọn iṣẹ akọkọ pẹlu:
| Iṣẹ-ṣiṣe | Apejuwe |
|---|---|
npm start |
Ṣe akopọ CSS ati JavaScript, kọ iwe-ipamọ, o si bẹrẹ olupin agbegbe kan. |
npm run dist |
Ṣẹda dist/liana pẹlu akojọpọ awọn faili. Nilo 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. |
Sass
Bootstrap nlo Dart Sass fun iṣakojọpọ awọn faili orisun Sass wa sinu awọn faili CSS (ti o wa ninu ilana kikọ wa), ati pe a ṣeduro pe ki o ṣe kanna ti o ba n ṣajọ Sass ni lilo opo gigun ti epo dukia tirẹ. A ti lo Node Sass tẹlẹ fun Bootstrap v4, ṣugbọn LibSass ati awọn idii ti a ṣe si oke rẹ, pẹlu Node Sass, ti wa ni idinku bayi .
Dart Sass nlo konge iyipo ti 10 ati fun awọn idi ṣiṣe ko gba laaye atunṣe iye yii. A ko sokale yi konge nigba siwaju processing ti wa ti ipilẹṣẹ CSS, gẹgẹ bi awọn nigba miniification, ṣugbọn ti o ba ti o yan lati ṣe bẹ a so mimu kan konge ti o kere 6 lati se awon oran pẹlu kiri kiri.
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.
RTLCSS
Bootstrap nlo RTLCSS lati ṣe ilana CSS ti a ṣajọpọ ati yi wọn pada si RTL - ni ipilẹ rọpo awọn ohun-ini mọ itọnisọna petele (fun apẹẹrẹ padding-left) pẹlu idakeji wọn. O gba wa laaye lati kọ CSS wa ni akoko kan ati ṣe awọn tweaks kekere nipa lilo iṣakoso RTLCSS ati awọn itọsọna iye .
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ẹ:
- Ṣiṣe nipasẹ iṣeto irinṣẹ loke lati fi sori ẹrọ gbogbo awọn igbẹkẹle.
- Lati awọn root
/bootstrapliana, ṣiṣenpm run docs-serveawọn ni awọn pipaṣẹ ila. - Ṣ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.