Xirhendzevutana xa xirhendzevutani & Vite

Nkongomiso wa ximfumo wa ndlela yo katsa na ku hlanganisa CSS na JavaScript ya Bootstrap eka phurojeke ya wena hi ku tirhisa Vite.

Eka tluka leri

Xana u lava ku tlula ku ya fika emakumu? Download khodi ya xihlovo na demo yo tirha ya nkongomiso lowu ku suka eka vuhlayiselo bya twbs/examples . U nga ha tlhela u pfula xikombiso eka StackBlitz ku kuma ku hlela loku hanyaka.

Ku lulamisa

Hi le ku akeni ka phurojeke ya Vite hi Bootstrap ku suka eka xiyimo xa le hansi, kutani ku na swilaveko swin’wana swa le mahlweni na magoza ya le mahlweni hi nga si sungula hakunene. Nkongomiso lowu wu lava leswaku u va na Node.js leyi nghenisiweke na ku tolovelana ko karhi na theminali.

Endla folda ya phurojeke u tlhela u veka npm. Hi ta endla my-projectfolda hi sungula npm hi -yargument ku papalata leswaku yi hi vutisa swivutiso hinkwaswo swa interactive.
```
mkdir my-project && cd my-project
npm init -y
```
Nghenisa Vite. Ku hambana na nkongomiso wa hina wa Webpack, ku na ntsena ku titshega ka xitirhisiwa xo aka xin’we laha. Hi tirhisa --save-devku kombisa leswaku ku titshega loku i ka ku tirhisiwa ka nhluvukiso ntsena ku nga ri ka vuhumelerisi.
```
npm i --save-dev vite
```
Nghenisa Bootstrap. Sweswi hi nga nghenisa Bootstrap. Hi ta tlhela hi nghenisa Popper tanihileswi ti-dropdown ta hina, ti-popover, na ti-toltips ti titshegeke hi yona eka xiyimo xa tona. Loko u nga kunguhati ku tirhisa swiphemu sweswo, u nga tshika Popper laha.
```
npm i --save bootstrap @popperjs/core
```
Nghenisa ku titshega loku engetelekeke. Ku engetela eka Vite na Bootstrap, hi lava ku titshega kun’wana (Sass) ku nghenisa kahle na ku hlanganisa CSS ya Bootstrap.
```
npm i --save-dev sass
```

Sweswi hi nga na ti dependencies hinkwato leti lavekaka leti nghenisiweke na ku setup, hi nga nghena entirhweni wo tumbuluxa tifayela ta project na ku nghenisa Bootstrap.

Xivumbeko xa phurojeke

Se hi endlile my-projectfolda hi tlhela hi sungula npm. Sweswi hi ta tlhela hi endla srcfolda ya hina, xitayili xa hina, na fayili ya JavaScript ku rhendzeleka na xivumbeko xa phurojeke. Tirhisa leswi landzelaka ku suka eka my-project, kutani u endla hi voko folda na xivumbeko xa fayili lexi kombisiweke laha hansi.

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

Loko u hetile, phurojeke ya wena leyi heleleke yi fanele yi languteka hi ndlela leyi:

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

Eka nkarhi lowu, hinkwaswo swi le ndzhawini leyinene, kambe Vite a yi nge tirhi hikuva a hi si tata ya hina ku vite.config.jsfikela sweswi.

Hlela Vite

Hi ku titshega loku nghenisiweke naswona folda ya hina ya phurojeke yi lunghekele leswaku hi sungula ku khoda, sweswi hi nga lulamisa Vite ni ku fambisa phurojeke ya hina laha tikweni.

Pfula vite.config.jseka muhleri wa wena. Leswi yi nga riki na nchumu, hi ta lava ku engetela swin’wana swa boilerplate config eka yona leswaku hi ta kota ku sungula server ya hina. Xiphemu lexi xa config xi byela Vite leswaku a va fanele ku lava JavaScript ya phurojeke ya hina na ndlela leyi sevha ya nhluvukiso yi faneleke ku tikhoma ha yona (ku koka ku suka eka srcfolda hi hot reload).
```
const path = require('path')

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

Endzhaku ka sweswo hi tata src/index.html. Leri i tluka ra HTML leri Vite yi nga ta ri layicha eka browser ku tirhisa CSS leyi hlanganisiweke na JS leyi hi nga ta yi engetela eka yona eka magoza ya le ndzhaku.

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

Hi katsa nyana Bootstrap styling laha na div class="container"and <button>leswaku hi ta vona loko CSS ya Bootstrap yi layicha hi Vite.

Sweswi hi lava script ya npm ku tirhisa Vite. Pfula package.jsonu engetela starttsalwa leri kombisiweke laha hansi (u fanele se u ri na tsalwa ra xikambelo). Hi ta tirhisa script leyi ku sungula sevha ya hina ya Vite dev ya laha kaya.
```
{
  // ...
  "scripts": {
    "start": "vite",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  // ...
}
```
Nakona eku heteleleni, hi nga sungula Vite. Ku suka eka my-projectfolda eka theminali ya wena, tirhisa tsalwa rero lerintshwa ra npm leri engeteriweke:
```
npm start
```

Eka xiyenge lexi landzelaka na xo hetelela eka nkongomiso lowu, hi ta nghenisa hinkwaswo swa Bootstrap swa CSS na JavaScript.

Nghenisa Xiphepherhele xa Bootstrap

Seta ku nghenisa ka Sass ka Bootstrap eka vite.config.js. Fayili ya wena ya vuhlanganisi sweswi yi hetisekile naswona yi fanele ku fambisana na xiphemu lexi nga laha hansi. Xiphemu lexintshwa ntsena laha i resolvexiyenge—hi tirhisa leswi ku engetela vito ra vito eka tifayela ta hina ta xihlovo endzeni node_modulesku hlayisa ku nghenisa swi olova hilaha swi nga kotekaka hakona.
```
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
  }
}
```
Sweswi, a hi ngheniseni CSS ya Bootstrap. Engetelani leswi landzelaka eka src/scss/styles.scssku nghenisa hinkwaswo swa xihlovo xa Bootstrap xa Sass.
```
// Import all of Bootstrap's CSS
@import "~bootstrap/scss/bootstrap";
```
U nga ha tlhela u nghenisa switayele swa hina hi swoxe loko u swi lava. Hlaya ti docs ta hina ta Sass import ku kuma vuxokoxoko.
Endzhaku ka sweswo hi layicha CSS hi nghenisa JavaScript ya Bootstrap. Engetelani leswi landzelaka eka src/js/main.jsku layicha CSS na ku nghenisa hinkwaswo swa Bootstrap's JS. Popper yi ta nghenisiwa hi ku tisungulela hi ku tirhisa Bootstrap.
```
// Import our custom CSS
import '../scss/styles.scss'

// Import all of Bootstrap's JS
import * as bootstrap from 'bootstrap'
```
U nga ha tlhela u nghenisa ti-plugin ta JavaScript hi toxe tanihilaha swi lavekaka hakona ku hlayisa vukulu bya bundle byi ri ehansi:
```
import Alert from 'bootstrap/js/dist/alert';

// or, specify which plugins you need:
import { Tooltip, Toast, Popover } from 'bootstrap';
```
Hlaya ti-doc ta hina ta JavaScript ku kuma vuxokoxoko byo tala bya ndlela yo tirhisa ti-plugin ta Bootstrap.
Naswona u hetile! 🎉 Hi Bootstrap's source Sass na JS fully loaded, sevha ya wena ya nhluvukiso wa laha kaya sweswi yi fanele ku languteka hi ndlela leyi.

Sweswi u nga sungula ku engetela swiphemu swihi na swihi swa Bootstrap leswi u lavaka ku swi tirhisa. Tiyisisa leswaku u languta phurojeke ya xikombiso xa Vite leyi heleleke ya ndlela yo katsa Sass yo engetela ya ntolovelo na ku antswisa ku aka ka wena hi ku nghenisa ntsena swiphemu swa CSS na JS swa Bootstrap leswi u swi lavaka.

U vona swin’wana leswi hoxeke kumbe leswi hundzeriweke hi nkarhi laha? Hi kombela u pfula mhaka eka GitHub . Xana u lava mpfuno wo lulamisa swiphiqo? Secha kutani u sungula mbulavurisano eka GitHub.