Bootstrap & Nsɛm a Wɔka Kyerɛ

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 Vite 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 ama live editing.

Hyehyɛ

Yɛrekyekye Vite 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 Vite hyɛ wo kɔmputa so. 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. 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 vite
```
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
```
Fa dependency foforo hyɛ mu. Vite ne Bootstrap akyi no, yehia dependency foforo (Sass) a ɛbɛma yɛatumi de Bootstrap no CSS aba na ayɛ no yiye.
```
npm i --save-dev sass
```

Seesei a yɛwɔ dependencies a ɛhia nyinaa a wɔde ahyɛ mu na yɛasiesie no, yɛbɛtumi akɔ adwuma so 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 vite.config.js

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
└── vite.config.js

Saa bere yi, biribiara wɔ beae a ɛfata, nanso Vite rennyɛ adwuma efisɛ yennya nhyɛɛ yɛn de no ma vite.config.js.

Hyehyɛ Vite 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 Vite na yɛayɛ yɛn project no wɔ locally.

Bue vite.config.jswɔ wo editor no mu. Esiane sɛ ɛyɛ blank nti, ɛho behia sɛ yɛde boilerplate config bi ka ho sɛnea ɛbɛyɛ a yebetumi afi yɛn server no ase. Saa config no fã yi ka kyerɛ Vite sɛ na ɛsɛ sɛ wɔhwehwɛ yɛn project no JavaScript ne sɛnea ɛsɛ sɛ nkɔso server no yɛ n’ade (twe fi srcfolda no mu ne hot reload).
```
const path = require('path')

export default {
  root: path.resolve(__dirname, 'src'),
  server: {
    port: 8080,
    hot: true
  }
}
```

Nea edi hɔ no yɛhyɛ mu ma src/index.html. Eyi ne HTML krataafa a Vite bɛ load wɔ browser no mu de adi dwuma bundled CSS ne JS a yɛde bɛka ho wɔ anammɔn a edi hɔ no mu.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap w/ Vite</title>
  </head>
  <body>
    <div class="container py-4 px-3 mx-auto">
      <h1>Hello, Bootstrap and Vite!</h1>
      <button class="btn btn-primary">Primary button</button>
    </div>
    <script type="module" src="./js/main.js"></script>
  </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 Vite de ahyɛ mu.

Afei deɛ yɛhia npm script na yɛde ayɛ Vite. Bue package.jsonna fa startscript a wɔakyerɛ wɔ aseɛ ha no ka ho (ɛsɛ sɛ wowɔ sɔhwɛ script no dedaw). Yɛde saa script yi bedi dwuma de ahyɛ yɛn local Vite dev server no ase.
```
{
  // ...
  "scripts": {
    "start": "vite",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  // ...
}
```
Na awiei koraa no, yebetumi afi Vite ase. 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

Hyehyɛ Bootstrap no Sass import no wɔ vite.config.js. Wo nhyehyeɛ fael no awie seesei na ɛsɛ sɛ ɛne snippet a ɛwɔ aseɛ ha no hyia. Ɔfã foforo biako pɛ a ɛwɔ ha ne resolveɔfã no—yɛde eyi di dwuma de alias bi ka yɛn source fael ahorow a ɛwɔ mu node_modulesno ho na ama imports ayɛ mmerɛw sɛnea ɛbɛyɛ yiye biara.
```
const path = require('path')

export default {
  root: path.resolve(__dirname, 'src'),
  resolve: {
    alias: {
      '~bootstrap': path.resolve(__dirname, 'node_modules/bootstrap'),
    }
  },
  server: {
    port: 8080,
    hot: true
  }
}
```
Afei, momma yɛmfa Bootstrap no CSS mmra. 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.
Nea edi hɔ no yɛde CSS no gu mu na yɛde Bootstrap no JavaScript no ba. Fa nea edidi so yi ka ho src/js/main.jsna fa CSS no hyɛ mu na fa Bootstrap JS no nyinaa ba. Popper bɛfa Bootstrap so aba ankasa.
```
// Import our custom CSS
import '../scss/styles.scss'

// 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ɛ Vite 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.