Bootstrap & Parsela ka baara

Gafe ofisiyali min bɛ Bootstrap ka CSS ni JavaScript doncogo n’u faralen ɲɔgɔn kan i ka porozɛ kɔnɔ ni Parcel ye.

Nin ɲɛ in kan

Aw b’a fɛ ka tɛmɛn ka taa a laban na wa? Aw ye nin gafe in ka source code ni baarakɛcogo jiracogo telesarse ka bɔ twbs/examples marayɔrɔ la . Aw bɛ se fana ka misali da wuli StackBlitz kɔnɔ nka aw tɛ a boli bawo Parcel tɛ dɛmɛn yen sisan.

Ka bila sen kan

An bɛ ka Parcel porozɛ dɔ jɔ ni Bootstrap ye ka bɔ fɛn fɔlɔ la, o la, fɛn dɔw bɛ yen minnu ka kan ka kɛ fɔlɔ ani ka taa ɲɛfɛ sanni an ka se ka daminɛ tiɲɛ na. Nin gafe in b’a ɲini i fɛ i ka Node.js sigi sen kan ani ka dɔnniya dɔw sɔrɔ terminal kan.

Porozɛ foli dɔ dabɔ ani ka npm sigi sen kan. An bɛna my-projectfoli Dabɔ ka npm daminɛ ni -yargument ye walasa a kana ɲininkaliw bɛɛ Kɛ an na minnu bɛ ɲɔgɔn Dòn.
```
mkdir my-project && cd my-project
npm init -y
```
A’ ye Parcelle sigi sen kan. A tɛ i n’a fɔ an ka Webpack gafe, jɔli baarakɛminɛn kelen dɔrɔn de bɛ yan. Parcel bɛna kanw sɛgɛsɛgɛlikɛlanw sigi a yɛrɛma (i n’a fɔ Sass) n’a y’u kɔlɔsi. An bɛ baara Kɛ --save-devk’a Jira ko nin jɔrɔnanko in ye yiriwali baara dɔrɔn de ye wa a tɛ Kɛ sɛnɛko ye.
```
npm i --save-dev parcel
```
Bootstrap sigi sen kan. Sisan an bɛ se ka Bootstrap in sigi sen kan. An bɛna Popper fana sigi sen kan bawo an ka dropdowns, popovers, ani tooltips bɛ da a kan u jɔyɔrɔko la. Ni aw ma labɛn kɛ ka baara kɛ ni o yɔrɔw ye, aw bɛ se ka Popper bɔ yan.
```
npm i --save bootstrap @popperjs/core
```

Sisan, an ye dependencies (daɲɛw) wajibiyalenw bɛɛ Sìgi sen kan, an bɛ Se ka baara Kɛ ka poroze filenw Dabɔ ani ka Bootstrap (Bootstrap) Dòn.

Porozɛw sigicogo

An ye my-projectfoli Dabɔ kaban ka npm daminɛ. Sisan an bɛna an ka srcfoli, stylesheet ani JavaScript file fana Dabɔ walasa ka porozɛ in jɔcogo Lamini. Aw bɛ nin wale ninnu kɛ ka bɔ my-project, walima aw bɛ foli ni dosiyew jɔcogo da aw bolo la min jiralen bɛ jukɔrɔ.

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

Ni aw ye a kɛ ka ban, aw ka poroze dafalen ka kan ka kɛ nin cogo la:

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

Nin yɔrɔ in na, fɛn bɛɛ bɛ yɔrɔ ɲuman na, nka Parcel mago bɛ HTML ɲɛ ni npm sɛbɛnni na walasa k’an ka sèrwɛri daminɛ.

Parcelle (parsela) labɛn

Ni dependencies (daɲɛw) sigilen don ani an ka poroze foli labɛnnen don an ka se ka kodɔnni daminɛ, an bɛ se sisan ka Parcel labɛn ani k’an ka poroze boli sigida la. Parcel yɛrɛ tɛ configuration file si wajibiya a dilanni fɛ, nka an mago bɛ npm script ni HTML file la walasa k’an ka server daminɛ.

Aw bɛ o src/index.htmldosiye dafa. Parcel mago bɛ ɲɛ dɔ la walasa ka ɲɛfɔli kɛ, o la an bɛ baara kɛ n’an ka index.htmlɲɛ ye walasa ka HTML jɔnjɔn dɔw sigi sen kan, an ka CSS ni JavaScript filenw fana sen bɛ o la.
```
<!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>
```
An bɛ Bootstrap styling dɔɔnin Dòn yan ni div class="container"ani <button>walasa an k'a Ye tuma min na Bootstrap ka CSS bɛ Lase Webpack fɛ.

Parcel bɛna a yɛrɛ dɔn an bɛ baara kɛ ni Sass ye ani ka Sass Parcel plugin sigi walasa k’a dɛmɛ. Nka, n’aw b’a fɛ, aw bɛ se fana ka boli ni bolo ye npm i --save-dev @parcel/transformer-sass.
Parcel npm sɛbɛnniw fara a kan. Da wuli ka package.jsonnin startsɛbɛnni in fara scriptsfɛn kan. An bɛna baara Kɛ ni nin sɛbɛnni in ye walasa k’an ka Parcel yiriwali-sɛrɛkili Daminɛ ani ka HTML filen min Dabɔ an ye min Dabɔ a dalajɛlen kɔ ka Dòn ‘dakun distkɔnɔ.
```
{
   // ...
   "scripts": {
     "start": "parcel serve src/index.html --public-url / --dist-dir dist",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   // ...
}
```
Wa a laban na, an bɛ se ka Parsela daminɛ. Ka bɔ my-projectfoli la i ka terminal kɔnɔ, i ka o npm script kura faralen in baara:
```
npm start
```

Nin gafe in dakun nata ni laban na, an bɛna Bootstrap ka CSS ni JavaScript bɛɛ ladon.

Import kɛ Bootstrap la

Bootstrap donli Parcel kɔnɔ, o bɛ don fila de wajibiya, kelen bɛ don an ka kɔnɔ, styles.scsskelen bɛ don an ka main.js.

Bootstrap ka CSS ladon. Aw bɛ ninnu fara a kan walasa src/scss/styles.scsska Bootstrap ka source Sass bɛɛ ladon.
```
// Import all of Bootstrap's CSS
@import "~bootstrap/scss/bootstrap";
```
Aw bɛ se fana ka an ka stylesheets (sɛbɛnniw) ladon kelen-kelen n’aw b’a fɛ. Aw ye an ka Sass import docs kalan walasa ka kunnafoni wɛrɛw sɔrɔ.
Import Bootstrap ka JS. Aw bɛ ninnu fara a kan walasa src/js/main.jska Bootstrap ka JS bɛɛ ladon. Popper bɛna don a yɛrɛma Bootstrap fɛ.
```
// Import all of Bootstrap's JS
import * as bootstrap from 'bootstrap'
```
Aw bɛ se fana ka JavaScript plugins kelen-kelen bɛɛ ladon i n’a fɔ a mago bɛ cogo min na walasa ka bundle hakɛw dɔgɔya:
```
import Alert from 'bootstrap/js/dist/alert'

// or, specify which plugins you need:
import { Tooltip, Toast, Popover } from 'bootstrap'
```
Aw ye an ka JavaScript sɛbɛnw kalan walasa ka kunnafoni wɛrɛw sɔrɔ Bootstrap ka baarakɛminɛnw baaracogo kan.
Ani i ye baara kɛ ka ban! 🎉 Ni Bootstrap ka source Sass ni JS bɛ chargement dafalen na, i ka sigida yiriwali server ka kan ka kɛ nin cogo la sisan.

Sisan i bɛ se ka Bootstrap yɔrɔ o yɔrɔ fara a kan i b’a fɛ ka baara kɛ ni min ye. Aw ye aw jija ka Parcel misali porozɛ dafalen lajɛ walasa ka Sass ladamu wɛrɛw fara a kan cogo min na ani ka aw ka jɔli kɛcogo ɲɛ ni Bootstrap ka CSS ni JS yɔrɔ minnu dɔrɔn de donna aw mago bɛ minnu na.

Aw ye fɛn dɔ ye min man ɲi walima min tɛmɛna yan wa? Aw ye ko dɔ da wuli GitHub kan . Aw mago bɛ dɛmɛ na gɛlɛyaw ɲɛnabɔli la wa? Aw ye ɲinini kɛ walima ka baro daminɛ GitHub kan.