I-Bootstrap & Iphasela

Umhlahlandlela osemthethweni wokuthi ungayifaka kanjani futhi uyihlanganise kanjani i-CSS ye-Bootstrap ne-JavaScript kuphrojekthi yakho usebenzisa i-Parcel.

Kuleli khasi

Ufuna ukweqela ekupheleni? Dawuniloda ikhodi yomthombo kanye nedemo yokusebenza yalo mhlahlandlela endaweni yokugcina ye- twbs/izibonelo . Ungakwazi futhi ukuvula isibonelo ku-StackBlitz kodwa ungayisebenzisi ngoba i-Parcel ayisekelwe lapho okwamanje.

Setha

Sakha iphrojekthi yePhasela nge-Bootstrap kusukela ekuqaleni, ngakho-ke kukhona izimfuneko ezithile kanye nezinyathelo zangaphambili ngaphambi kokuthi siqale ngempela. Lo mhlahlandlela udinga ukuthi ufake i-Node.js kanye nokujwayelana netheminali.

Dala ifolda yephrojekthi bese usetha i-npm. Sizodala my-projectifolda futhi siqalise i-npm nge- -yagumenti ukuze siyigweme ukusibuza yonke imibuzo ephendulanayo.
```
mkdir my-project && cd my-project
npm init -y
```
Faka Iphasela. Ngokungafani nomhlahlandlela wethu we-Webpack, kunokuncika kwethuluzi elilodwa kuphela lokwakha lapha. I-Parcel izofaka ngokuzenzakalelayo iziguquli zolimi (njenge-Sass) njengoba izibona. Sisebenzisa --save-devukukhombisa ukuthi lokhu kwencika okokusetshenziswa kwentuthuko kuphela hhayi okokukhiqiza.
```
npm i --save-dev parcel
```
Faka i-Bootstrap. Manje sesingakwazi ukufaka i-Bootstrap. Sizophinda sifake i-Popper njengoba okwehliswayo kwethu, ama-popvers, namathiphu amathuluzi kuncike kuyo ukuze ibekwe. Uma ungahlelile ukusebenzisa lezo zingxenye, ungashiya i-Popper lapha.
```
npm i --save bootstrap @popperjs/core
```

Manje njengoba sesinakho konke ukuncika okudingekayo okufakiwe, singakwazi ukuqala umsebenzi ngokudala amafayela wephrojekthi futhi singenise i-Bootstrap.

Isakhiwo sephrojekthi

Sesivele my-projectsiyidalile ifolda futhi saqalisa i-npm. Manje sizophinde sakhe srcifolda yethu, ishidi lesitayela, kanye nefayela le-JavaScript ukuze sihlanganise ukwakheka kwephrojekthi. Qalisa okulandelayo ukusuka ku- my-project, noma uzenzele ifolda nesakhiwo sefayela esiboniswe ngezansi.

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

Uma usuqedile, iphrojekthi yakho ephelele kufanele ibukeke kanje:

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

Njengamanje, yonke into isendaweni efanele, kodwa i-Parcel idinga ikhasi le-HTML kanye neskripthi se-npm ukuze iqale iseva yethu.

Lungiselela Iphasela

Njengoba okuncikile kufakiwe kanye nefolda yethu yephrojekthi isilungele ukuthi siqale ukubhala amakhodi, manje sesingakwazi ukumisa i-Parcel futhi siqhube iphrojekthi yethu endaweni. Iphasela ngokwalo alidingi ifayela lokumisa ngokuklanywa, kodwa sidinga umbhalo we-npm nefayela le-HTML ukuze siqale iseva yethu.

Gcwalisa src/index.htmlifayela. Iphasela lidinga ikhasi ukuze linikezelwe, ngakho sisebenzisa index.htmlikhasi lethu ukuze simise i-HTML ethile eyisisekelo, okuhlanganisa namafayela ethu e-CSS kanye ne-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>
```
Sifaka isitayela esincane se-Bootstrap lapha nokuthi div class="container"futhi <button>ukuze sibone lapho i-CSS ye-Bootstrap ilayishwa yi-Webpack.

I-Parcel izobona ngokuzenzakalelayo ukuthi sisebenzisa i-Sass futhi ifake i- plugin ye-Sass Parcel ukuze iyisekele. Nokho, uma ufisa, ungakwazi futhi ukugijima mathupha npm i --save-dev @parcel/transformer-sass.
Engeza imibhalo ye-Parcel npm. Vula package.jsonbese wengeza startumbhalo olandelayo scriptsentweni. Sizosebenzisa lesi script ukuze siqale iseva yethu yokuthuthukisa Iphasela futhi sinikeze ifayela le-HTML esilidalile ngemva kokuthi lihlanganiswe ohlwini distlwemibhalo.
```
{
   // ...
   "scripts": {
     "start": "parcel serve src/index.html --public-url / --dist-dir dist",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   // ...
}
```
Futhi ekugcineni, singakwazi ukuqala i-Parcel. Kusuka my-projectkufolda ekutheminali yakho, sebenzisa lo mbhalo we-npm osanda kufakwa:
```
npm start
```

Esigabeni esilandelayo nesokugcina kulo mhlahlandlela, sizongenisa yonke i-CSS ye-Bootstrap ne-JavaScript.

Ngenisa i-Bootstrap

Ukungenisa i-Bootstrap ku-Parcel kudinga ukungenisa okubili, okukodwa kweyethu styles.scsskanye nokukodwa kweyethu main.js.

Ngenisa i-CSS ye-Bootstrap. Engeza okulandelayo ukuze src/scss/styles.scssungenise wonke umthombo we-Bootstrap's Sass.
```
// Import all of Bootstrap's CSS
@import "~bootstrap/scss/bootstrap";
```
Ungangenisa futhi amashidi esitayela ethu ngawodwana uma ufuna. Funda amadokhumenti ethu okungenisa kwe-Sass ukuze uthole imininingwane.
Ngenisa i-Bootstrap's JS. Engeza okulandelayo ukuze src/js/main.jsungenise yonke i-Bootstrap's JS. I-Popper izongeniswa ngokuzenzakalelayo nge-Bootstrap.
```
// Import all of Bootstrap's JS
import * as bootstrap from 'bootstrap'
```
Futhi ungangenisa ama-plugin e-JavaScript ngawodwana njengoba kudingeka ukuze ugcine osayizi benqwaba bephansi:
```
import Alert from 'bootstrap/js/dist/alert'

// or, specify which plugins you need:
import { Tooltip, Toast, Popover } from 'bootstrap'
```
Funda amadokhumenti ethu e-JavaScript ukuze uthole ulwazi olwengeziwe mayelana nendlela yokusebenzisa ama-plugin e-Bootstrap.
Futhi usuqedile! 🎉 Ngomthombo we-Bootstrap i-Sass ne-JS zilayishwe ngokugcwele, iseva yakho yokuthuthukisa yasendaweni kufanele manje ibukeke kanje.

Manje ungaqala ukwengeza noma yiziphi izingxenye ze-Bootstrap ofuna ukuzisebenzisa. Qiniseka ukuthi uhlola iphrojekthi yesibonelo seParcel ephelele yokuthi ungayifaka kanjani i-Sass yangokwezifiso eyengeziwe futhi uthuthukise isakhiwo sakho ngokungenisa kuphela izingxenye ze-Bootstrap's CSS ne-JS ozidingayo.

Ubona okuthile okungalungile noma okudlulelwe yisikhathi lapha? Sicela uvule inkinga ku-GitHub . Udinga usizo lokuxazulula inkinga? Sesha noma uqale ingxoxo ku-GitHub.