Bootstrap fi Paarselaa

Qajeelfama ofiisaa akkaataa CSS fi JavaScript Bootstrap pirojektii kee keessatti Parcel fayyadamuun hammachuu fi walitti qabdu.

Fuula kana irratti

Hanga dhumaatti darbuu barbaadduu? Koodii madda fi demoo hojii qajeelfama kanaaf kuusaa twbs/examples irraa buufadhu . Akkasumas fakkeenya StackBlitz keessatti banuu dandeessa garuu hin hojjedhu sababiin isaas Parcel yeroo ammaa achitti hin deeggaramne.

Qixeessuu

Bootstrap waliin pirojektii Parcel jalqabarraa ijaaraa jirra, kanaaf dhuguma jalqabuu keenya dura haal-duree tokko tokkoo fi tarkaanfiiwwan fuulduraa jiru. Qajeelfamni kun Node.js fe'amee fi tarminaalii wajjin walbaruu tokko tokko qabaachuu si gaafata.

Galfata pirojektii uumuu fi npm saagi. Galmee uumnee my-projectnpm -yfalmii waliin jalqabna akka inni gaaffilee wal-qunnamtii hunda nu hin gaafanne.
```
mkdir my-project && cd my-project
npm init -y
```
Parsela dhaabuu. Qajeelfama Webpack keenyaa irraa adda ta'ee, asitti hirkattummaa meeshaa ijaarsaa tokko qofatu jira. Parcel ofumaan tiraansifoormeetaroota afaanii (akka Sass) akkuma isaan adda baasu ni fe'a. --save-devHirkatummaa kun itti fayyadama misoomaa qofaaf malee oomishaaf akka hin taane mallattoo itti kennuuf itti fayyadamna.
```
npm i --save-dev parcel
```
Bootstrap jedhamu fe'adhu. Amma Bootstrap install gochuu dandeenya. Akkasumas Popper ni fe'anna erga dropdowns, popovers, fi tooltips keenya bakka isaaniif irratti hundaa'aniif. Yoo qaamolee sana fayyadamuuf karoorfatte hin taane, Popper asitti dhiisuu dandeessa.
```
npm i --save bootstrap @popperjs/core
```

Amma hirkattummaa barbaachisoo ta'an hunda erga fe'annee booda, faayiloota pirojektii uumuu fi Bootstrap galchuu irratti hojiitti galuu dandeenya.

Caasaa pirojektii

Duraanis my-projectgalmee uumnee npm jalqabneerra. srcAmma akkasumas galmee keenya, akkaataa, fi faayilii JaavaScript caasaa pirojektii naannessuuf ni uumna . Kanneen armaan gadii irraa fiigi my-project, ykn harkaan galmee fi caasaa faayilii armaan gadii uumi.

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

Yeroo xumurtu, pirojektiin kee guutuun akkas fakkaachuu qaba:

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

Yeroo kanatti wanti hundi bakka sirrii ta'etti jira, garuu Parcel server keenya jalqabuuf fuula HTML fi npm script barbaada.

Parsela Qindeessi

Hirkatummaa fe'amee fi galmeen pirojektii keenyaa koodii akka jalqabnuuf qophaa'ee, amma Parcel qindeessuu fi pirojektii keenya naannootti hojjechuu dandeenya. Parcel mataan isaa dizaayiniidhaan faayilii qindeessaa hin barbaadu, garuu sarvarii keenya jalqabuuf iskiriiptii npm fi faayilii HTML barbaachisa.

src/index.htmlFaayila sana guutaa . Parcel agarsiisuuf fuula barbaada, kanaaf fuula keenya fayyadamnee index.htmlHTML bu'uuraa tokko tokko saagna, faayiloota CSS fi JavaScript keenya dabalatee.

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

Bootstrap styling xiqqoo asitti div class="container"fi waliin <button>dabalaa jirra akka yeroo Bootstrap's CSS Webpack'n fe'amu arginu.

Parcel ofumaan Sass fayyadamaa akka jirru adda baasee Sass Parcel plugin isa deeggaruuf fe'a. Haa ta'u malee, yoo barbaadde, harkaan hojjechuus ni dandeessa npm i --save-dev @parcel/transformer-sass.

Iskiriiptii Parcel npm itti dabali. Banii iskiriiptii package.jsonarmaan gadii wanta irratti dabali . Iskiriiptii kana fayyadamnee sarvarii misooma Parcel keenya jalqabnee faayilii HTML erga gara galmeetti qindaa'ee booda uumne agarsiifna.startscriptsdist
```
{
   // ...
   "scripts": {
     "start": "parcel serve src/index.html --public-url / --dist-dir dist",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   // ...
}
```
Dhumarrattis, Parcel jalqabuu dandeenya. Galmee tarminaalii kee keessa jiru irraa my-project, iskiriiptii npm haaraa dabalame sana hojjedhu:
```
npm start
```

Kutaa itti aanuu fi isa dhumaa qajeelfama kanaa keessatti, CSS fi JavaScript Bootstrap hunda ni galchina.

Bootstrap galchuu

Bootstrap gara Parcel galchuun galchuu lama barbaada, tokko gara keenyatti styles.scsstokko immoo gara keenya main.js.

CSS Bootstrap galchuu. src/scss/styles.scssMadda Bootstrap Sass hunda galchuuf kanneen armaan gadii to itti dabali .
```
// Import all of Bootstrap's CSS
@import "~bootstrap/scss/bootstrap";
```
Akkasumas yoo barbaadde stylesheets keenya dhuunfaan galchuu dandeessa. Bal'ina isaaf docs import Sass keenya dubbisaa .
JS Bootstrap galchuu. src/js/main.jsJS Bootstrap hunda galchuuf kanneen armaan gadii to itti dabali . Popper karaa Bootstrap ofumaan ni galfama.
```
// Import all of Bootstrap's JS
import * as bootstrap from 'bootstrap'
```
Akkasumas, hammangaa baandaa gadi qabuuf akka barbaachisummaa isaatti dhuunfaan ifteessitoota JaavaScript galchuu dandeessa:
```
import Alert from 'bootstrap/js/dist/alert'

// or, specify which plugins you need:
import { Tooltip, Toast, Popover } from 'bootstrap'
```
Odeeffannoo dabalataa akkaataa itti fayyadama Bootstrap's plugins argachuuf docs JavaScript keenya dubbisi .
Atis xumurteetta! 🎉 Maddi Bootstrap's Sass fi JS guutummaatti fe'amee waan jiruuf, amma sarvariin misooma naannoo keessanii akkas fakkaachuu qaba.

Amma qaamolee Bootstrap fayyadamuu barbaaddu kamiyyuu dabaluu jalqabuu dandeessa. Akkaataa Sass amala dabalataa hammachuu fi kutaalee CSS fi JS Bootstrap si barbaachisan qofa galchuudhaan ijaarsa kee fooyyessuu dandeessuuf pirojektii fakkeenya Parcel guutuu ilaaluu kee mirkaneessi .

Asitti waan dogoggoraa ykn yeroon isaa darbe argitaa? Maaloo GitHub irratti dhimma bani . Rakkoo furuu irratti gargaarsa barbaadduu? GitHub irratti barbaadi ykn marii jalqabi .