Bootstrap & Parcel

Kalozera wovomerezeka wamomwe mungaphatikizire ndikumanga mtolo wa Bootstrap's CSS ndi JavaScript mu polojekiti yanu pogwiritsa ntchito Parcel.

Patsamba ili

Mukufuna kulumpha mpaka kumapeto? Tsitsani kachidindo kochokera ndi chiwonetsero chogwirira ntchito cha bukhuli kuchokera pankhokwe ya twbs/examples . Mutha kutsegulanso chitsanzo mu StackBlitz koma osachiyendetsa chifukwa Parcel sichikuthandizidwa pano.

Khazikitsa

Tikumanga pulojekiti ya Parcel ndi Bootstrap kuyambira pachiyambi, kotero pali zofunikira zina ndi masitepe akutsogolo tisanayambe. Bukuli likufuna kuti muyike Node.js komanso kudziwa zambiri za terminal.

Pangani chikwatu cha polojekiti ndikukhazikitsa npm. Tipanga my-projectchikwatu ndikuyambitsa npm ndi -ymkangano kuti tipewe kutifunsa mafunso onse okhudzana.
```
mkdir my-project && cd my-project
npm init -y
```
Ikani Parcel. Mosiyana ndi kalozera wathu wa Webpack, pali chida chimodzi chokha chodalira pano. Parcel imangoyika zosinthira zilankhulo (monga Sass) momwe zimazizindikira. Timagwiritsa ntchito --save-devkuwonetsa kuti kudalira uku ndikungogwiritsa ntchito chitukuko osati kupanga.
```
npm i --save-dev parcel
```
Ikani Bootstrap. Tsopano titha kukhazikitsa Bootstrap. Tikhazikitsanso Popper popeza zotsikira, popovers, ndi zida zothandizira zimatengera momwe zilili. Ngati simukukonzekera kugwiritsa ntchito zigawozi, mutha kusiya Popper apa.
```
npm i --save bootstrap @popperjs/core
```

Tsopano popeza tili ndi zodalira zonse zofunika, titha kugwira ntchito yopanga mafayilo a polojekiti ndikulowetsa Bootstrap.

Kapangidwe ka polojekiti

Tapanga kale my-projectchikwatu ndikuyambitsa npm. Tsopano tipanganso chikwatu chathu src, masitayelo, ndi fayilo ya JavaScript kuti tikwaniritse dongosolo la polojekitiyi. Yendetsani zotsatirazi kuchokera ku my-project, kapena pangani pamanja chikwatu ndi mawonekedwe a fayilo omwe akuwonetsedwa pansipa.

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

Mukamaliza, polojekiti yanu yonse iyenera kuwoneka motere:

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

Pakadali pano, chilichonse chili pamalo oyenera, koma Parcel ikufunika tsamba la HTML ndi npm script kuti iyambitse seva yathu.

Konzani Parcel

Ndi zodalira zomwe zayikidwa komanso foda yathu ya projekiti yokonzeka kuti tiyambe kukopera, tsopano titha kukonza Parcel ndikuyendetsa polojekiti yathu kwanuko. Parcel palokha safuna fayilo yosinthira ndi mapangidwe, koma timafunikira npm script ndi fayilo ya HTML kuti tiyambitse seva yathu.

Lembani src/index.htmlfayilo. Parcel ikufunika tsamba kuti ipereke, kotero timagwiritsa ntchito index.htmltsamba lathu kukhazikitsa ma HTML ofunikira, kuphatikiza mafayilo athu a CSS ndi 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>

Tikuphatikiza masitayelo pang'ono a Bootstrap apa ndi div class="container"komanso <button>kuti tiwone pomwe Bootstrap's CSS imadzazidwa ndi Webpack.

Parcel idzazindikira yokha kuti tikugwiritsa ntchito Sass ndikuyika pulogalamu yowonjezera ya Sass Parcel kuti ithandizire. Komabe, ngati mukufuna, mutha kuyendetsanso pamanja npm i --save-dev @parcel/transformer-sass.

Onjezani zolemba za Parcel npm. Tsegulani package.jsonndikuwonjezera startscript ku scriptschinthucho. Tigwiritsa ntchito script iyi kuyambitsa seva yathu yopangira Parcel ndikupereka fayilo ya HTML yomwe tidapanga itatha kulembedwa m'ndandanda dist.
```
{
   // ...
   "scripts": {
     "start": "parcel serve src/index.html --public-url / --dist-dir dist",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   // ...
}
```
Ndipo pomaliza, titha kuyambitsa Parcel. Kuchokera pa my-projectchikwatu chomwe chili mu terminal yanu, yendetsani npm script yatsopanoyo:
```
npm start
```

Mu gawo lotsatira komanso lomaliza la bukhuli, tibweretsa ma CSS onse a Bootstrap ndi JavaScript.

Lowetsani Bootstrap

Kulowetsa Bootstrap mu Parcel kumafuna kulowetsa kuwiri, kumodzi mwathu styles.scssndi kumodzi ku main.js.

Lowetsani CSS ya Bootstrap. Onjezani zotsatirazi kuti src/scss/styles.scssmulowetse Sass yonse ya Bootstrap.
```
// Import all of Bootstrap's CSS
@import "~bootstrap/scss/bootstrap";
```
Mutha kuitanitsanso masitayelo athu payekhapayekha ngati mukufuna. Werengani zolemba zathu za Sass kuti mumve zambiri.
Tengani Bootstrap's JS. Onjezani zotsatirazi kuti src/js/main.jsmulowetse zonse za Bootstrap's JS. Popper idzatumizidwa kunja kudzera mu Bootstrap.
```
// Import all of Bootstrap's JS
import * as bootstrap from 'bootstrap'
```
Mutha kulowetsanso mapulagini a JavaScript payekhapayekha ngati pakufunika kuti mitolo ikhale pansi:
```
import Alert from 'bootstrap/js/dist/alert'

// or, specify which plugins you need:
import { Tooltip, Toast, Popover } from 'bootstrap'
```
Werengani zolemba zathu za JavaScript kuti mudziwe zambiri zamomwe mungagwiritsire ntchito mapulagini a Bootstrap.
Ndipo mwatha! 🎉 Ndi gwero la Bootstrap la Sass ndi JS litadzaza, seva yanu yachitukuko yakumaloko iyenera kuwoneka chonchi.

Tsopano mutha kuyamba kuwonjezera zida zilizonse za Bootstrap zomwe mukufuna kugwiritsa ntchito. Onetsetsani kuti mwawona pulojekiti yathunthu yachitsanzo cha momwe mungaphatikizire ma Sass owonjezera ndi kukhathamiritsa nyumba yanu potumiza zigawo za Bootstrap's CSS ndi JS zomwe mukufuna.

Mukuwona cholakwika kapena chachikale apa? Chonde tsegulani vuto pa GitHub . Mukufuna thandizo lazovuta? Sakani kapena yambitsani zokambirana pa GitHub.