I-Bootstrap kunye nePasile

Isikhokelo esisemthethweni sendlela yokubandakanya kunye nokudibanisa i-Bootstrap's CSS kunye neJavaScript kwiprojekthi yakho usebenzisa iParcel.

Kweli phepha

Ngaba ufuna ukutsiba ukuya esiphelweni? Khuphela ikhowudi yomthombo kunye nedemo yokusebenza kwesi sikhokelo kwi- twbs/imizekelo yokugcina . Unako kwakhona ukuvula umzekelo kwi-StackBlitz kodwa ungayiqhubeki kuba iPasela ayixhaswanga ngoku.

Misela

Sakha iprojekthi yePasela ngeBootstrap ukusuka ekuqaleni, ke kukho izinto eziyimfuneko kunye namanyathelo angaphambili ngaphambi kokuba siqalise ngokwenene. Esi sikhokelo sifuna ukuba ube neNode.js efakiweyo kunye nokuqhelana ne-terminal.

Yenza ifolda yeprojekthi kunye nokuseta i-npm. Siza kudala my-projectifolda kwaye siqalise i-npm -yngengxoxo ukuyinqanda ukusibuza yonke imibuzo esebenzisanayo.
```
mkdir my-project && cd my-project
npm init -y
```
Faka iPasi. Ngokungafaniyo nesikhokelo sethu seWebpack, kukho ukuxhomekeka kwesixhobo esinye kuphela apha. I-Parcel iya kuzifaka ngokuzenzekelayo iziguquli zolwimi (ezifana ne-Sass) njengoko izibhaqa. Sisebenzisa --save-devukubonakalisa ukuba oku kuxhomekeka kukusetyenziswa kophuhliso kuphela hayi imveliso.
```
npm i --save-dev parcel
```
Faka i-Bootstrap. Ngoku sinokufaka i-Bootstrap. Siza kuphinda siyifake iPopper ukusukela oko ukwehla kwethu, iipopovers, kunye neengcebiso zesixhobo zixhomekeke kuyo ngokuma kwazo. Ukuba awucwangcisi ukusebenzisa ezo zixhobo, ungashiya iPopper apha.
```
npm i --save bootstrap @popperjs/core
```

Ngoku ukuba sinabo bonke ukuxhomekeka okufunekayo okufakiweyo, sinokufika emsebenzini ukudala iifayile zeprojekthi kunye nokungenisa i-Bootstrap.

Ubume beprojekthi

Sele siyile my-projectifolda kwaye saqalisa i-npm. Ngoku siza kudala srcifolda yethu, icwecwe lesimbo, kunye nefayile yeJavaScript ukujikeleza ubume beprojekthi. Qhuba oku kulandelayo ukusuka my-project, okanye wenze ngesandla isiqulathi seefayili kunye nesakhiwo sefayile eboniswe ngezantsi.

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

Xa ugqibile, iprojekthi yakho epheleleyo kufuneka ijongeke ngolu hlobo:

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

Okwangoku, yonke into ikwindawo elungileyo, kodwa iPasi idinga iphepha le-HTML kunye neskripthi se-npm ukuqalisa iseva yethu.

Qwalasela iPasile

Ngokuxhomekeka okufakelweyo kunye nefolda yethu yeprojekthi isilungele ukuba siqale ukubhalwa kweekhowudi, ngoku sinokuyiqwalasela iPasi kwaye siqhube iprojekthi yethu ekuhlaleni. Ipasile ngokwayo ayifuni fayile yoqwalaselo ngoyilo, kodwa siyayifuna iscript senpm kunye nefayile yeHTML ukuqala iseva yethu.

Gcwalisa src/index.htmlifayile. Ipasile idinga iphepha ukuze inikezelwe, ngoko ke sisebenzisa index.htmliphepha lethu ukuseta iHTML esisiseko, kuquka iCSS yethu kunye neefayile zeJavaScript.

<!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>

Sibandakanya isitayile esincinci seBootstrap apha kunye div class="container"kwaye <button>ukuze sibone xa i-Bootstrap's CSS ilayishwa yiWebpack.

Ipasile iza kuzibhaqa ngokuzenzekelayo ukuba sisebenzisa iSass kwaye ifakele iplagi yeSass Parcel ukuyixhasa. Nangona kunjalo, ukuba unqwenela, unokwenza ngesandla npm i --save-dev @parcel/transformer-sass.

Yongeza imibhalo yePasela npm. Vula package.jsonkwaye wongeze startiskripthi esilandelayo scriptskwinto. Siza kusebenzisa esi script ukuqalisa iseva yethu yophuhliso lwePasile kwaye sinikezele ngefayile yeHTML esiyenzileyo emva kokuba idityaniswe kuluhlu dist.
```
{
   // ...
   "scripts": {
     "start": "parcel serve src/index.html --public-url / --dist-dir dist",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   // ...
}
```
Kwaye ekugqibeleni, sinokuqala iPasela. Ukusuka my-projectkwifolda kwi-terminal yakho, sebenzisa eso skripthi se-npm esitsha:
```
npm start
```

Kwicandelo elilandelayo nelokugqibela kwesi sikhokelo, siza kungenisa yonke i-Bootstrap's CSS kunye neJavaScript.

Thatha ngaphandle i-Bootstrap

Ukungeniswa kwe-Bootstrap kwiParcel kufuna izinto ezimbini ezithunyelwa ngaphandle, enye kweyethu styles.scsskunye neyethu main.js.

Thatha ngaphandle i-Bootstrap's CSS. Yongeza oku kulandelayo src/scss/styles.scssukungenisa yonke imvelaphi yeBootstrap yeSass.
```
// Import all of Bootstrap's CSS
@import "~bootstrap/scss/bootstrap";
```
Ungangenisa amaxwebhu ethu esitayile ngokwahlukeneyo ukuba uyafuna. Funda amaxwebhu wethu we-Sass wokungenisa iinkcukacha.
Thatha ngaphandle i-Bootstrap's JS. Yongeza oku kulandelayo src/js/main.jsukungenisa yonke i-Bootstrap's JS. I-Popper iyakungeniswa ngaphandle ngokuzenzekelayo ngeBootstrap.
```
// Import all of Bootstrap's JS
import * as bootstrap from 'bootstrap'
```
Ungangenisa iiplagi zeJavaScript nganye nganye njengoko kufuneka ukugcina ubungakanani benqwaba phantsi:
```
import Alert from 'bootstrap/js/dist/alert'

// or, specify which plugins you need:
import { Tooltip, Toast, Popover } from 'bootstrap'
```
Funda amaxwebhu ethu eJavaScript ngolwazi olungakumbi malunga nendlela yokusebenzisa iiplagi zeBootstrap.
Kwaye ugqibile! 🎉 Ngomthombo we-Bootstrap we-Sass kunye ne-JS elayishwe ngokupheleleyo, iseva yakho yophuhliso yasekhaya ngoku kufuneka ijongeke ngolu hlobo.

Ngoku ungaqala ukongeza naziphi na izinto zeBootstrap ofuna ukuzisebenzisa. Qiniseka ukuba ujonga iprojekthi yomzekelo weParcel opheleleyo wendlela yokubandakanya i-Sass yesiko elongezelelweyo kunye nokwandisa ukwakha kwakho ngokungenisa kuphela iinxalenye ze-Bootstrap's CSS kunye ne-JS ozifunayo.

Uyabona into engalunganga okanye ephelelwe lixesha apha? Nceda uvule umba kwi-GitHub . Ngaba ufuna uncedo lokulungisa ingxaki? Khangela okanye uqale ingxoxo kwi-GitHub.