Omusipi gwa Boot & Vite

Ekitabo ekitongole eky'engeri y'okussaamu n'okugatta CSS ne JavaScript za Bootstrap mu pulojekiti yo ng'okozesa Vite.

Ku muko guno

Oyagala okubuuka okutuuka ku nkomerero? Wano wefunire source code ne demo ekola ku guide eno okuva mu twbs/examples repository . Osobola n'okuggulawo ekyokulabirako mu StackBlitz okulongoosa obutereevu.

Okutandika

Tuzimba pulojekiti ya Vite ne Bootstrap okuva ku ntandikwa, kale waliwo ebyetaagisa n’emitendera egy’omu maaso nga tetunnatandika ddala. Ekitabo kino kyetaaga okuba ne Node.js etekeddwako n’okumanyiira okutonotono ku terminal.

Tonda ekitabo kya pulojekiti era oteekewo npm. Tujja kukola my-projectfolder era tutandike npm -yn'ensonga okwewala okutubuuza ebibuuzo byonna ebikwatagana.
```
mkdir my-project && cd my-project
npm init -y
```
Teekamu Vite. Okwawukana ku kitabo kyaffe ekya Webpack, waliwo okwesigamizibwa kw'ekintu kimu kyokka eky'okuzimba wano. Tukozesa --save-devokulaga nti okwesigamizibwa kuno kwa kukozesa nkulaakulana yokka so si kufulumya.
```
npm i --save-dev vite
```
Teeka mu nkola ya Bootstrap. Kati tusobola okuteeka Bootstrap. Tujja kuteeka ne Popper okuva dropdowns zaffe, popovers, ne tooltips bwe zisinziira ku yo ku positioning yaabwe. Bw’oba toteekateeka kukozesa bitundu ebyo, osobola okulekayo Popper wano.
```
npm i --save bootstrap @popperjs/core
```
Teeka okwesigamizibwa okw’enjawulo. Ng’oggyeeko Vite ne Bootstrap, twetaaga dependency endala (Sass) okuyingiza obulungi n’okugatta CSS ya Bootstrap.
```
npm i --save-dev sass
```

Kati nga bwetulina dependencies zonna ezeetaagisa eziteekeddwawo n’okuteekawo, tusobola okutandika okukola nga tukola fayiro za pulojekiti n’okuyingiza Bootstrap.

Ensengeka ya pulojekiti

Twakola dda my-projectfolda ne tutandika npm. Kati era tujja kukola srcfolda yaffe, stylesheet, ne fayiro ya JavaScript okuzingulula ensengeka ya pulojekiti. Dduka bino wammanga okuva mu my-project, oba tonda mu ngalo ekitabo n'ensengeka ya fayiro eragiddwa wansi.

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

Bw’omala, pulojekiti yo enzijuvu erina okufaanana bweti:

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

Mu kiseera kino, buli kimu kiri mu kifo ekituufu, naye Vite tegenda kukola kuba tetunnajjuza yaffe vite.config.jsn’okutuusa kati.

Tegeka Vite

Nga dependencies ziteekeddwawo era nga project folder yaffe yeetegefu okutandika okukola coding, kati tusobola okutegeka Vite ne tuddukanya project yaffe mu kitundu.

Ggulawo vite.config.jsmu editor yo. Okuva bwe kiri nti blank, tujja kwetaaga okugigattako boilerplate config tusobole okutandika server yaffe. Ekitundu kino ekya config kigamba Vite nti baali banoonya JavaScript ya pulojekiti yaffe n'engeri seva y'enkulaakulana gy'erina okweyisaamu (okusika okuva mu srcfolda n'okuddamu okutikka okwokya).
```
const path = require('path')

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

Ekiddako tujjuzaamu src/index.html. Guno gwe muko gwa HTML Vite gw’egenda okutikka mu browser okukozesa CSS ne JS ezikuŋŋaanyiziddwa ze tujja okugyongerako mu mitendera egy’oluvannyuma.

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

Tuteeka wano akatono ku Bootstrap styling ne the div class="container"ne <button>tulabe nga Bootstrap's CSS etikkibwa Vite.

Kati twetaaga script ya npm okuddukanya Vite. Ggulawo package.jsonera osseeko startscript eragiddwa wansi (olina okuba nga olina dda script y'okugezesa). Tujja kukozesa script eno okutandika Vite dev server yaffe eya wano.
```
{
  // ...
  "scripts": {
    "start": "vite",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  // ...
}
```
Era ekisembayo, tusobola okutandika Vite. Okuva mu my-projectfolda mu terminal yo, dduka script eyo eya npm eyaakayongerwako:
```
npm start
```

Mu kitundu ekiddako era ekisembayo mu kitabo kino, tujja kuyingiza CSS ne JavaScript zonna eza Bootstrap.

Okuyingiza Bootstrap

Teekawo okuyingiza kwa Bootstrap okwa Sass mu vite.config.js. Fayiro yo ey'okusengeka kati ewedde era erina okukwatagana n'ekitundu wansi. Ekitundu ekipya kyokka wano kye resolvekitundu—kino tukikozesa okwongera erinnya ku fayiro zaffe ez’ensibuko munda node_modulesokukuuma okuyingiza nga kwangu nga bwe kisoboka.
```
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
  }
}
```
Kati, ka tuyingize CSS ya Bootstrap. Okwongerako bino wammanga ku src/scss/styles.scssokuyingiza byonna ebya Bootstrap's source Sass.
```
// Import all of Bootstrap's CSS
@import "~bootstrap/scss/bootstrap";
```
Osobola n’okuyingiza sitayiro zaffe kinnoomu bw’oba oyagala. Soma Sass import docs zaffe okumanya ebisingawo.
Ekiddako tutikka CSS ne tuyingiza JavaScript ya Bootstrap. Okwongerako bino wammanga ku src/js/main.jsokutikka CSS n'okuyingiza JS zonna eza Bootstrap. Popper ejja kuyingizibwa mu ngeri ey’otoma ng’eyita mu Bootstrap.
```
// Import our custom CSS
import '../scss/styles.scss'

// Import all of Bootstrap's JS
import * as bootstrap from 'bootstrap'
```
Osobola n'okuyingiza JavaScript plugins kinnoomu nga bwe kyetaagisa okukuuma obunene bwa bundle wansi:
```
import Alert from 'bootstrap/js/dist/alert';

// or, specify which plugins you need:
import { Tooltip, Toast, Popover } from 'bootstrap';
```
Soma ebiwandiiko byaffe ebya JavaScript okumanya ebisingawo ku ngeri y'okukozesaamu plugins za Bootstrap.
Era omaze! 🎉 Nga ensibuko ya Bootstrap Sass ne JS zitikkiddwa mu bujjuvu, seva yo ey'enkulaakulana ey'omu kitundu kati erina okufaanana bweti.

Kati osobola okutandika okwongerako ebitundu bya Bootstrap byonna by’oyagala okukozesa. Kakasa nti okebera pulojekiti y'ekyokulabirako ya Vite enzijuvu engeri y'okussaamu Sass ey'enjawulo ey'enjawulo n'okulongoosa okuzimba kwo ng'oyingiza ebitundu byokka ebya Bootstrap's CSS ne JS by'olina.

Olaba ekintu ekikyamu oba ekivudde ku mulembe wano? Nsaba oggulewo ensonga ku GitHub . Oyagala buyambi okugonjoola ebizibu? Noonya oba tandika okukubaganya ebirowoozo ku GitHub.