Bootstrap & Vite jedhamuun beekama

Qajeelfama ofiisaa akkaataa CSS fi JavaScript Bootstrap pirojektii kee keessatti Vite 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 gulaaluu kallattiif StackBlitz keessatti banuun ni danda'ama.

Qixeessuu

Bootstrap waliin pirojektii Vite 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
```
Vite jedhamutti install godhaa. Qajeelfama Webpack keenyaa irraa adda ta'ee, asitti hirkattummaa meeshaa ijaarsaa tokko qofatu jira. --save-devHirkatummaa kun itti fayyadama misoomaa qofaaf malee oomishaaf akka hin taane mallattoo itti kennuuf itti fayyadamna.
```
npm i --save-dev vite
```
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
```
Hirkatummaa dabalataa fe'i. Vite fi Bootstrap malees, CSS Bootstrap sirnaan galchuu fi walitti qabuuf hirkattummaa biraa (Sass) nu barbaachisa.
```
npm i --save-dev sass
```

Amma hirkattummaa barbaachisoo ta'an hunda install goonee setup qabna, 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 vite.config.js

Yeroo xumurtu, pirojektiin kee guutuun akkas fakkaachuu qaba:

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

Yeroo kanatti wanti hundi bakka sirrii ta'etti jira, garuu Vite hin hojjetu sababiin isaas ammallee keenya hin guunne vite.config.js.

Vite qindeessuu

Hirkatummaa fe'amee fi galmeen pirojektii keenyaa koodii akka jalqabnuuf qophaa'ee, amma Vite qindeessuu fi pirojektii keenya naannootti hojjechuu dandeenya.

vite.config.jsGulaalaa kee keessaa bani . Duwwaa waan ta'eef, server keenya jalqabuu akka dandeenyuuf boilerplate config tokko tokko itti dabaluu qabna. Kutaan qindeessaa kun Vite akka JavaScript pirojektii keenyaa fi akkaataa sarvariin misoomaa amala qabaachuu qabu barbaaduu akka qaban itti hima ( srcgalfata irraa harkisuu hot reload waliin).
```
const path = require('path')

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

Itti aansuudhaan src/index.html. Kun fuula HTML Vite browser keessatti fe'ee CSS fi JS bundled ta'e fayyadamuuf tarkaanfiiwwan booda irratti itti daballudha.

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

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

Amma Vite hojjechuuf npm script nu barbaachisa. Iskiriiptii armaan gadii agarsiifame baniitii package.jsonitti dabali start(iskiriiptii qormaataa duraan qabaachuu qabda). Iskiriiptii kana fayyadamnee Vite dev server naannoo keenyaa ni jalqabna.
```
{
  // ...
  "scripts": {
    "start": "vite",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  // ...
}
```
Dhumarrattis, Vite 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

Galtee Sass Bootstrap keessaa saagi vite.config.js. Faayilli qindeessaa kee amma xumuramee jira, akkasumas cuquliisa armaan gadii wajjin walsimuu qaba. Kutaan haaraan asitti jiru kutaa qofa resolve-kana fayyadamnee faayiloota madda keenyaa keessaa maqaa biraa dabaluudhaaf node_modulesgaltee hanga danda'ametti salphaa taasisuudhaaf.
```
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
  }
}
```
Amma, CSS Bootstrap haa galchinu. 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 .
Itti aansuudhaan CSS fe'annee JavaScript Bootstrap galchina. src/js/main.jsCSS fe'uuf fi JS Bootstrap hunda galchuuf kanneen armaan gadii to itti dabali . Popper karaa Bootstrap ofumaan ni galfama.
```
// Import our custom CSS
import '../scss/styles.scss'

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