Xikhomela-ndhawu xa Bootstrap & Xipaci

Nkongomiso wa ximfumo wa ndlela yo katsa na ku hlanganisa CSS na JavaScript ya Bootstrap eka phurojeke ya wena hi ku tirhisa Parcel.

Eka tluka leri

Xana u lava ku tlula ku ya fika emakumu? Download khodi ya xihlovo na demo yo tirha ya nkongomiso lowu ku suka eka vuhlayiselo bya twbs/examples . U nga ha tlhela u pfula xikombiso eka StackBlitz kambe u nga xi tirhisi hikuva Parcel a yi seketeriwi kwalaho sweswi.

Ku lulamisa

Hi le ku akeni ka phurojeke ya Parcel hi Bootstrap ku suka eka xiyimo xa le hansi, kutani ku na swilaveko swin’wana swa le mahlweni na magoza ya le mahlweni hi nga si sungula hakunene. Nkongomiso lowu wu lava leswaku u va na Node.js leyi nghenisiweke na ku tolovelana ko karhi na theminali.

Endla folda ya phurojeke u tlhela u veka npm. Hi ta endla my-projectfolda hi sungula npm hi -yargument ku papalata leswaku yi hi vutisa swivutiso hinkwaswo swa interactive.
```
mkdir my-project && cd my-project
npm init -y
```
Nghenisa Phasela. Ku hambana na nkongomiso wa hina wa Webpack, ku na ntsena ku titshega ka xitirhisiwa xo aka xin’we laha. Parcel yi ta nghenisa hi yoxe swihundzuluxi swa ririmi (ku fana na Sass) loko yi swi vona. Hi tirhisa --save-devku kombisa leswaku ku titshega loku i ka ku tirhisiwa ka nhluvukiso ntsena ku nga ri ka vuhumelerisi.
```
npm i --save-dev parcel
```
Nghenisa Bootstrap. Sweswi hi nga nghenisa Bootstrap. Hi ta tlhela hi nghenisa Popper tanihileswi ti-dropdown ta hina, ti-popover, na ti-toltips ti titshegeke hi yona eka xiyimo xa tona. Loko u nga kunguhati ku tirhisa swiphemu sweswo, u nga tshika Popper laha.
```
npm i --save bootstrap @popperjs/core
```

Sweswi hi nga na ti dependencies hinkwato leti lavekaka leti nghenisiweke, hi nga nghena entirhweni wo tumbuluxa tifayela ta phurojeke na ku nghenisa Bootstrap.

Xivumbeko xa phurojeke

Se hi endlile my-projectfolda hi tlhela hi sungula npm. Sweswi hi ta tlhela hi endla srcfolda ya hina, xitayili xa hina, na fayili ya JavaScript ku rhendzeleka na xivumbeko xa phurojeke. Tirhisa leswi landzelaka ku suka eka my-project, kutani u endla hi voko folda na xivumbeko xa fayili lexi kombisiweke laha hansi.

mkdir {src,src/js,src/scss}
touch src/index.html src/js/main.js src/scss/styles.scss

Loko u hetile, phurojeke ya wena leyi heleleke yi fanele yi languteka hi ndlela leyi:

my-project/
├── src/
│   ├── js/
│   │   └── main.js
│   ├── scss/
│   │   └── styles.scss
│   └── index.html
├── package-lock.json
└── package.json

Eka xiyimo lexi, hinkwaswo swi le ndzhawini leyinene, kambe Parcel yi lava pheji ya HTML na npm script ku sungula sevha ya hina.

Hlela Phasela

Hi ku titshega loku nghenisiweke na folda ya hina ya phurojeke yi lunghekele leswaku hi sungula ku khoda, sweswi hi nga lulamisa Parcel no fambisa phurojeke ya hina laha tikweni. Parcel hi yoxe a yi lavi fayili ya vuhlanganisi hi dizayini, kambe hi lava tsalwa ra npm na fayili ya HTML ku sungula sevha ya hina.

Tata src/index.htmlfayili leyi. Parcel yi lava pheji yo yi humesa, kutani hi tirhisa index.htmlpheji ya hina ku veka HTML yin’wana ya xisekelo, ku katsa na tifayela ta hina ta CSS na JavaScript.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap w/ Parcel</title>
    <link rel="stylesheet" href="scss/styles.scss">
    <script type="module" src="js/main.js"></script>
  </head>
  <body>
    <div class="container py-4 px-3 mx-auto">
      <h1>Hello, Bootstrap and Parcel!</h1>
      <button class="btn btn-primary">Primary button</button>
    </div>
  </body>
</html>

Hi katsa nyana Bootstrap styling laha na div class="container"na <button>leswaku hi ta vona loko CSS ya Bootstrap yi layicha hi Webpack.

Parcel yi ta tikuma hi yoxe leswaku hi tirhisa Sass ivi yi nghenisa plugin ya Sass Parcel ku yi seketela. Hambiswiritano, loko u swi lava, u nga ha tlhela u tirhisa hi voko npm i --save-dev @parcel/transformer-sass.

Engetelani switshuriwa swa Parcel npm. Pfula package.jsonu engetela starttsalwa leri landzelaka eka scriptsnchumu wolowo. Hi ta tirhisa script leyi ku sungula sevha ya hina ya nhluvukiso wa Parcel na ku humesa fayili ya HTML leyi hi yi endleke endzhaku ka loko yi hlengeletiwile eka distxikombo.
```
{
   // ...
   "scripts": {
     "start": "parcel serve src/index.html --public-url / --dist-dir dist",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   // ...
}
```
Nakona eku heteleleni, hi nga sungula Parcel. Ku suka eka my-projectfolda eka theminali ya wena, tirhisa tsalwa rero lerintshwa ra npm leri engeteriweke:
```
npm start
```

Eka xiyenge lexi landzelaka na xo hetelela eka nkongomiso lowu, hi ta nghenisa hinkwaswo swa Bootstrap swa CSS na JavaScript.

Nghenisa Xiphepherhele xa Bootstrap

Ku nghenisa Bootstrap eka Parcel swi lava ku nghenisa kambirhi, xin’we eka hina styles.scsskasi xin’wana eka hina main.js.

Nghenisa CSS ya Bootstrap. Engetelani leswi landzelaka eka src/scss/styles.scssku nghenisa hinkwaswo swa xihlovo xa Bootstrap xa Sass.
```
// Import all of Bootstrap's CSS
@import "~bootstrap/scss/bootstrap";
```
U nga ha tlhela u nghenisa switayele swa hina hi swoxe loko u swi lava. Hlaya ti docs ta hina ta Sass import ku kuma vuxokoxoko.
Nghenisa JS ya Bootstrap. Engetelani leswi landzelaka eka src/js/main.jsku nghenisa hinkwaswo swa Bootstrap's JS. Popper yi ta nghenisiwa hi ku tisungulela hi ku tirhisa Bootstrap.
```
// Import all of Bootstrap's JS
import * as bootstrap from 'bootstrap'
```
U nga ha tlhela u nghenisa ti-plugin ta JavaScript hi toxe tanihilaha swi lavekaka hakona ku hlayisa vukulu bya bundle byi ri ehansi:
```
import Alert from 'bootstrap/js/dist/alert'

// or, specify which plugins you need:
import { Tooltip, Toast, Popover } from 'bootstrap'
```
Hlaya ti-doc ta hina ta JavaScript ku kuma vuxokoxoko byo tala bya ndlela yo tirhisa ti-plugin ta Bootstrap.
Naswona u hetile! 🎉 Hi Bootstrap's source Sass na JS fully loaded, sevha ya wena ya nhluvukiso wa laha kaya sweswi yi fanele ku languteka hi ndlela leyi.

Sweswi u nga sungula ku engetela swiphemu swihi na swihi swa Bootstrap leswi u lavaka ku swi tirhisa. Tiyisisa leswaku u languta phurojeke ya xikombiso xa Parcel leyi heleleke ya ndlela yo katsa Sass yo engetela ya ntolovelo na ku antswisa ku aka ka wena hi ku nghenisa ntsena swiphemu swa CSS na JS swa Bootstrap leswi u swi lavaka.

U vona swin’wana leswi hoxeke kumbe leswi hundzeriweke hi nkarhi laha? Hi kombela u pfula mhaka eka GitHub . Xana u lava mpfuno wo lulamisa swiphiqo? Secha kutani u sungula mbulavurisano eka GitHub.