Bootstrap & Nneɛma a Wɔde Kɔma Nneɛma

Akwankyerɛ a ɛyɛ aban de a ɛfa sɛnea wode Bootstrap CSS ne JavaScript bɛka ho na woaboaboa ano wɔ wo adwuma no mu denam Parcel so.

Wɔ kratafa yi so

Wopɛ sɛ wuhuruw kɔ awiei? Twe source code ne adwumayɛ demo ma akwankyerɛ yi fi twbs/examples akorae . Wubetumi nso abue nhwɛso no wɔ StackBlitz mu nanso worentu mmirika efisɛ Parcel ntumi mmoa wɔ hɔ mprempren.

Hyehyɛ

Yɛrekyekye Parcel adwuma bi ne Bootstrap fi mfiase, enti nneɛma bi wɔ hɔ a ɛsɛ sɛ wodi kan yɛ ne anammɔn a ɛwɔ anim ansa na yɛatumi afi ase ankasa. Saa akwankyerɛ yi hwehwɛ sɛ wowɔ Node.js a wɔde ahyɛ mu na woahu terminal no yiye kakra.

Yɛ project folda na hyehyɛ npm. Yɛbɛbɔ my-projectfolda no na yɛde argument no ahyɛ npm ase -ysɛnea ɛbɛyɛ a ɛrenbisa yɛn nsɛmmisa a ɛfa nkitahodi ho no nyinaa.
```
mkdir my-project && cd my-project
npm init -y
```
Fa Parcel no hyɛ mu. Nea ɛnte sɛ yɛn Webpack akwankyerɛ no, ɛwɔ adwinnade a wɔde si dan biako pɛ a ɛde ne ho to so wɔ ha. Parcel bɛhyehyɛ kasa nsakraefoɔ (te sɛ Sass) no ankasa berɛ a ɛhunu no. Yɛde --save-devkyerɛ sɛ saa ahofadi yi yɛ nkɔso a wɔde bedi dwuma nkutoo na ɛnyɛ nneɛma a wɔyɛ.
```
npm i --save-dev parcel
```
Fa Bootstrap no hyɛ wo kɔmputa so. Afei yebetumi ahyɛ Bootstrap no. Yɛbɛsan nso ahyɛ Popper ɛfiri sɛ yɛn dropdowns, popovers, ne tooltips gyina so ma wɔn gyinabea. Sɛ woanyɛ nhyehyɛe sɛ wode saa nneɛma no bedi dwuma a, wubetumi ayi Popper afi mu wɔ ha.
```
npm i --save bootstrap @popperjs/core
```

Seesei a yɛanya dependencies a ɛhia nyinaa ahyɛ mu no, yɛbɛtumi akɔ adwuma mu ayɛ project files no na yɛde Bootstrap aba.

Dwumadie no nhyehyeɛ

Yɛayɛ my-projectfolda no dedaw na yɛahyɛ npm ase. Afei yɛbɛsan nso ayɛ yɛn srcfolda, stylesheet, ne JavaScript fael no de ayɛ adwuma no nhyehyɛe no kurukuruwa. Fa nea edidi so yi fi my-project, anaa fa nsa yɛ folda ne fael nhyehyɛe a wɔakyerɛ wɔ ase ha no.

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

Sɛ wowie a, ɛsɛ sɛ wo adwuma a edi mũ no te sɛ eyi:

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

Saa berɛ yi, biribiara wɔ beaeɛ pa, nanso Parcel hia HTML krataafa ne npm script na ama yɛahyɛ yɛn server no ase.

Hyehyɛ Parcel no ho nhyehyɛe

Sɛ yɛde dependencies ahyɛ mu na yɛn project folder no ayɛ krado ama yɛn sɛ yɛbɛhyɛ aseɛ ayɛ coding a, afei yɛbɛtumi asiesie Parcel na yɛayɛ yɛn project no wɔ locally. Parcel ankasa nhia configuration file biara denam design so, nanso yehia npm script ne HTML fael a yɛde befi yɛn server no ase.

Hyɛ src/index.htmlfael no ma. Parcel hia krataafa bi a ɛbɛkyerɛ ase, enti yɛde yɛn index.htmlkrataafa no hyehyɛ HTML titiriw bi, a yɛn CSS ne JavaScript fael ahorow ka ho.

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

Yɛde Bootstrap styling kakra ka ho wɔ ha ne div class="container"ne <button>sɛnea ɛbɛyɛ a yebehu bere a Bootstrap CSS no Webpack de ahyɛ mu.

Parcel bɛhunu sɛ yɛde Sass redi dwuma na ɛde Sass Parcel plugin no ahyɛ mu de aboa no. Nanso, sɛ wopɛ a, wubetumi nso de nsa atu mmirika npm i --save-dev @parcel/transformer-sass.

Fa Parcel npm nkyerɛwde ahorow no ka ho. Bue na fa script package.jsona edidi so yi ka ade no ho. Yɛde saa script yi bedi dwuma de ahyɛ yɛn Parcel development server no ase na yɛakyerɛ HTML fael a yɛayɛ no bere a wɔaboaboa ano akɔ directory no mu awie no.startscriptsdist
```
{
   // ...
   "scripts": {
     "start": "parcel serve src/index.html --public-url / --dist-dir dist",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   // ...
}
```
Na awiei koraa no, yebetumi afi ase Parcel. Efi my-projectfolda a ɛwɔ wo terminal no mu no, fa saa npm script foforo a wode aka ho no kɔ:
```
npm start
```

Wɔ ɔfa a edi hɔ ne nea etwa to wɔ akwankyerɛ yi mu no, yɛbɛfa Bootstrap CSS ne JavaScript nyinaa aba.

Fa Bootstrap no ba

Bootstrap a wode bɛba Parcel mu no hwehwɛ sɛ wode nneɛma abien ba, biako kɔ yɛn mu styles.scssna biako kɔ yɛn main.js.

Fa Bootstrap no CSS no ba. Fa nea edidi so yi ka ho na src/scss/styles.scssfa Bootstrap no fibea Sass nyinaa ba.
```
// Import all of Bootstrap's CSS
@import "~bootstrap/scss/bootstrap";
```
Wubetumi nso de yɛn stylesheets no aba ankorankoro sɛ wopɛ a. Kenkan yɛn Sass import docs no na woanya nsɛm no ho nsɛm.
Fa Bootstrap no JS no ba. Fa nea edidi so yi ka ho na src/js/main.jsfa Bootstrap JS no nyinaa ba. Popper bɛfa Bootstrap so aba ankasa.
```
// Import all of Bootstrap's JS
import * as bootstrap from 'bootstrap'
```
Wubetumi nso de JavaScript plugins aba mmiako mmiako sɛnea ɛho hia na ama bundle akɛse akɔ fam:
```
import Alert from 'bootstrap/js/dist/alert'

// or, specify which plugins you need:
import { Tooltip, Toast, Popover } from 'bootstrap'
```
Kenkan yɛn JavaScript docs no na woanya nsɛm pii afa sɛnea wode Bootstrap no plugins bedi dwuma ho.
Na woawie! 🎉 Bere a Bootstrap no fibea Sass ne JS ahyɛ mu ma no, ɛsɛ sɛ wo mpɔtam hɔ nkɔso server no mprempren te sɛ eyi.

Afei wobɛtumi ahyɛ aseɛ de Bootstrap components biara a wopɛ sɛ wode di dwuma no aka ho. Hwɛ hu sɛ wobɛhwɛ Parcel nhwɛso adwuma a edi mũ no ama sɛnea wode Sass foforo a wɔahyɛ da ayɛ aka ho na woayɛ wo dan no yiye denam Bootstrap CSS ne JS no afã horow a wuhia nkutoo a wode bɛba no so.

Woahu biribi a ɛnteɛ anaasɛ ne bere atwam wɔ ha? Yɛsrɛ wo bue asɛm bi wɔ GitHub . Wo hia mmoa wɔ ɔhaw ahorow a wobedi ho dwuma ho? Hwehwɛ anaa fi ase nkɔmmɔbɔ wɔ GitHub.