Bootstrap & Akpawo ƒe Agbalẽvi

Mɔfiame si le se nu na alesi nàde Bootstrap ƒe CSS kple JavaScript wò dɔa me ahaƒoe nu ƒu to Parcel zazã me.

Le axa sia dzi

Àdi be yeadzo ayi nuwuwua? Wɔ mɔfiame sia ƒe dzɔtsoƒe ƒe nuŋɔŋlɔ kple dɔwɔwɔ ƒe wɔwɔfia tso twbs/examples ƒe nudzraɖoƒe . Àteŋu aʋu kpɔɖeŋua hã le StackBlitz me gake màwɔe o elabena womedo alɔ Parcel le afima fifia o.

Ɖo anyi

Míele Parcel dɔ aɖe tum kple Bootstrap tso gɔmedzedzea me ke, eyata nudidi aɖewo li do ŋgɔ kple afɔɖeɖe siwo le ŋgɔ hafi míate ŋu adze egɔme ŋutɔŋutɔ. Mɔfiame sia bia be nàda Node.js ɖe wò kɔmpiuta dzi eye nànya nu tso terminal la ŋu vie.

Wɔ dɔ ƒe agbalẽdzraɖoƒe eye nàɖo npm. Míawɔ my-projectagbalẽdzraɖoƒea eye míadze npm gɔme kple -ynyaʋiʋlia be wòagabia nya siwo katã wotsɔ wɔa dɔe la mí o.
```
mkdir my-project && cd my-project
npm init -y
```
De Parcel la ɖe wò kɔmpiuta dzi. To vovo na míaƒe Webpack mɔfiame la, xɔtudɔwɔnu ɖeka koe li si dzi woanɔ te ɖo le afisia. Parcel aɖo gbegbɔgblɔ ƒe tɔtrɔwo (abe Sass ene) ɖe eɖokui si ne ele wo kpɔm. Míezãnɛ --save-devtsɔ ɖea dzesi be ŋgɔyiyi zazã koe ŋuɖoɖo ɖe nu ŋu sia nye ke menye nuwɔwɔ ta o.
```
npm i --save-dev parcel
```
De Bootstrap la ɖe wò kɔmpiuta dzi. Fifia míate ŋu aɖo Bootstrap ɖe wò kɔmpiuta dzi. Míaɖo Popper hã ɖe eme elabena míaƒe dropdowns, popovers, kple dɔwɔnu ƒe aɖaŋuɖoɖowo nɔ te ɖe edzi hena woƒe nɔƒe. Ne mèɖoe be yeazã akpa mawo o la, àte ŋu aɖe Popper ɖa le afisia.
```
npm i --save bootstrap @popperjs/core
```

Fifia si míeɖo nusiwo katã hiã la, míate ŋu adze dɔ gɔme awɔ dɔa ƒe faɛlwo kple Bootstrap tsɔtsɔ va eme.

Dɔa ƒe ɖoɖowɔwɔ

Míewɔ my-projectagbalẽdzraɖoƒea xoxo eye míedze npm gɔme. Fifia míawɔ míaƒe srcagbalẽdzraɖoƒe, atsyãgbalẽ, kple JavaScript faɛl hã be míaƒo dɔa ƒe ɖoɖo nu ƒu. Wɔ nusiwo gbɔna tso my-project, alo tsɔ asi wɔ agbalẽdzraɖoƒe kple faɛl ƒe ɖoɖo si woɖe fia le ete.

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

Ne èwu enu la, ele be wò dɔ bliboa nanɔ ale:

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

Le afisia la, nusianu le teƒe nyuitɔ, gake Parcel hiã HTML axa kple npm ŋɔŋlɔdzesi be wòadze míaƒe server gɔme.

Ðoɖowɔwɔ ɖe Parcel ŋu

Esi woda nusiwo dzi woanɔ te ɖo eye míaƒe dɔa ƒe agbalẽdzraɖoƒe le klalo na mí be míadze kɔdaɖoɖo gɔme la, míate ŋu aɖo Parcel azɔ eye míawɔ míaƒe dɔa le nutoa me. Parcel ŋutɔ mehiã ɖoɖowɔɖi faɛl aɖeke le ɖoɖo nu o, gake míehiã npm ŋɔŋlɔdzesi kple HTML faɛl be míadze míaƒe dɔdzikpɔla gɔme.

Kpe src/index.htmlfaɛl la ɖo. Parcel hiã axa aɖe be wòaɖe egɔme, eyata míezãa míaƒe index.htmlaxaa tsɔ ɖoa HTML vevi aɖewo, siwo dometɔ aɖewoe nye míaƒe CSS kple JavaScript faɛlwo.

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

Míele Bootstrap ƒe atsyã vi aɖe dem afisia kple div class="container"eye <button>ale be míakpɔ ne Bootstrap ƒe CSS la le agba me to Webpack dzi.

Parcel akpɔe le eɖokui si be míele Sass zãm eye wòade Sass Parcel ƒe kpeɖeŋutɔa ɖe eme be wòado alɔe. Gake ne èdi la, àte ŋu atsɔ asi awɔ npm i --save-dev @parcel/transformer-sass.

Tsɔ Parcel npm ŋɔŋlɔdzesiwo kpee. Ʋu package.jsoneye nàtsɔ startŋɔŋlɔdzesi si gbɔna akpe ɖe scriptsnusi nèdi ŋu. Míazã ŋɔŋlɔdzesi sia atsɔ adze míaƒe Parcel development server gɔme eye míaɖe HTML faɛl si míewɔ la gɔme le eƒoƒoƒu ɖe agbalẽdzraɖoƒea vɔ megbe dist.
```
{
   // ...
   "scripts": {
     "start": "parcel serve src/index.html --public-url / --dist-dir dist",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   // ...
}
```
Eye mlɔeba la, míate ŋu adze Parcel gɔme. Tso my-projectagbalẽdzraɖoƒe si le wò terminal me la, wɔ npm ŋɔŋlɔdzesi yeye ma si nètsɔ kpe ɖe eŋu la:
```
npm start
```

Le mɔfiame sia ƒe akpa si kplɔe ɖo kple mamlɛtɔ me la, míaxɔ Bootstrap ƒe CSS kple JavaScript katã.

Tsɔ Bootstrap la va dukɔa me

Bootstrap tsɔtsɔ va Parcel me bia be woatsɔ eve aɖo ɖe míaƒe styles.scss, ɖeka ɖe míaƒe main.js.

Tsɔ Bootstrap ƒe CSS la va eme. Tsɔ nusiwo gbɔna kpe ɖe eŋu src/scss/styles.scssbe nàxɔ Bootstrap ƒe dzɔtsoƒe Sass katã.
```
// Import all of Bootstrap's CSS
@import "~bootstrap/scss/bootstrap";
```
Àte ŋu atsɔ míaƒe atsyãgbalẽwo hã ava ɖekaɖeka ne èdi. Xlẽ míaƒe Sass import docs hena numeɖeɖe bubuwo.
Import Bootstrap ƒe JS. Tsɔ nusiwo gbɔna kpe ɖe eŋu src/js/main.jsbe nàtsɔ Bootstrap ƒe JS katã ade eme. Woatsɔ Popper ava le eɖokui si to Bootstrap dzi.
```
// Import all of Bootstrap's JS
import * as bootstrap from 'bootstrap'
```
Àteŋu atsɔ JavaScript ƒe kpeɖeŋutɔwo hã ava ɖekaɖeka alesi wòhiã be nàna bundle ƒe lolomewo naɖiɖi:
```
import Alert from 'bootstrap/js/dist/alert'

// or, specify which plugins you need:
import { Tooltip, Toast, Popover } from 'bootstrap'
```
Xlẽ míaƒe JavaScript docs hena nyatakaka bubuwo tso alesi nàzã Bootstrap ƒe plugins ŋu.
Eye èwu enu! 🎉 Esi Bootstrap ƒe dzɔtsoƒe Sass kple JS tsɔ agba bliboe la, ele be wò nutoa me ŋgɔyiyi dɔdzikpɔla nanɔ abe alea ene azɔ.

Fifia àteŋu adze Bootstrap ƒe akpa ɖesiaɖe si nèdi be yeazã la tsɔtsɔ kpee gɔme. Kpɔ egbɔ be yekpɔ Parcel ƒe kpɔɖeŋudɔ bliboa hena alesi nàde Sass tɔxɛ bubuwo eme eye nàwɔ wò xɔtutu wòanyo wu to Bootstrap ƒe CSS kple JS ƒe akpa siwo nèhiã la ko tsɔtsɔ va eme.

Èkpɔ nane si mesɔ o alo do xoxo le afisiaa? Taflatse ʋu nya aɖe le GitHub . Èhiã kpekpeɖeŋu le kuxiwo gbɔ kpɔkpɔ mea? Di alo dze numedzodzro gɔme le GitHub.