Bootstrap & Vite

Mwongozo rasmi wa jinsi ya kujumuisha na kuunganisha CSS ya Bootstrap na JavaScript katika mradi wako kwa kutumia Vite.

Katika ukurasa huu

Je, ungependa kuruka hadi mwisho? Pakua msimbo wa chanzo na onyesho la kufanya kazi la mwongozo huu kutoka hazina ya twbs/mifano . Unaweza pia kufungua mfano katika StackBlitz kwa uhariri wa moja kwa moja.

Sanidi

Tunaunda mradi wa Vite na Bootstrap kutoka mwanzo, kwa hivyo kuna mahitaji ya lazima na hatua za mbele kabla hatujaanza. Mwongozo huu unahitaji uwe na Node.js iliyosakinishwa na ujuzi fulani na terminal.

Unda folda ya mradi na usanidi npm. Tutaunda my-projectfolda na kuanzisha npm kwa -yhoja ili kuepusha kutuuliza maswali yote ya mwingiliano.
```
mkdir my-project && cd my-project
npm init -y
```
Sakinisha Vite. Tofauti na mwongozo wetu wa Webpack, kuna utegemezi wa zana moja tu ya ujenzi hapa. Tunatumia --save-devkuashiria kuwa utegemezi huu ni kwa matumizi ya maendeleo tu na sio kwa uzalishaji.
```
npm i --save-dev vite
```
Sakinisha Bootstrap. Sasa tunaweza kusakinisha Bootstrap. Pia tutasakinisha Popper kwa kuwa menyu kunjuzi, popover na vidokezo vyetu hutegemea kwa uwekaji wao. Ikiwa huna mpango wa kutumia vipengele hivyo, unaweza kuachana na Popper hapa.
```
npm i --save bootstrap @popperjs/core
```
Sakinisha utegemezi wa ziada. Kando na Vite na Bootstrap, tunahitaji utegemezi mwingine (Sass) ili kuleta na kuunganisha vizuri CSS ya Bootstrap.
```
npm i --save-dev sass
```

Sasa kwa kuwa tuna tegemezi zote muhimu zilizosakinishwa na kusanidi, tunaweza kuanza kazi kuunda faili za mradi na kuagiza Bootstrap.

Muundo wa mradi

Tayari tumeunda my-projectfolda na kuanzisha npm. Sasa tutaunda pia srcfolda yetu, laha ya mtindo na faili ya JavaScript ili kukamilisha muundo wa mradi. Endesha zifuatazo kutoka my-project, au uunde mwenyewe folda na muundo wa faili ulioonyeshwa hapa chini.

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

Unapomaliza, mradi wako kamili unapaswa kuonekana kama hii:

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

Kwa wakati huu, kila kitu kiko mahali pazuri, lakini Vite haitafanya kazi kwa sababu bado hatujajaza yetu vite.config.js.

Sanidi Vite

Vitegemezi vikiwa vimesakinishwa na folda yetu ya mradi iko tayari kwa sisi kuanza kuweka misimbo, sasa tunaweza kusanidi Vite na kuendesha mradi wetu ndani ya nchi.

Fungua vite.config.jskatika kihariri chako. Kwa kuwa haina kitu, tutahitaji kuongeza usanidi wa boilerplate kwake ili tuweze kuanzisha seva yetu. Sehemu hii ya usanidi inaambia Vite walitafuta JavaScript ya mradi wetu na jinsi seva ya ukuzaji inapaswa kuishi (kuvuta kutoka kwa srcfolda na upakiaji moto tena).
```
const path = require('path')

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

Ifuatayo tunajaza src/index.html. Huu ndio ukurasa wa HTML ambao Vite itapakia kwenye kivinjari ili kutumia CSS iliyounganishwa na JS tutaiongeza katika hatua za baadaye.

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

Tunajumuisha mtindo mdogo wa Bootstrap hapa na div class="container"na <button>ili tuone wakati CSS ya Bootstrap inapopakiwa na Vite.

Sasa tunahitaji hati ya npm kuendesha Vite. Fungua package.jsonna uongeze starthati iliyoonyeshwa hapa chini (tayari unapaswa kuwa na hati ya jaribio). Tutatumia hati hii kuanzisha seva yetu ya ndani ya Vite dev.
```
{
  // ...
  "scripts": {
    "start": "vite",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  // ...
}
```
Na hatimaye, tunaweza kuanza Vite. Kutoka kwa my-projectfolda kwenye terminal yako, endesha hati mpya ya npm:
```
npm start
```

Katika sehemu inayofuata na ya mwisho kwa mwongozo huu, tutaleta CSS zote za Bootstrap na JavaScript.

Ingiza Bootstrap

Sanidi uingizaji wa Sass wa Bootstrap katika vite.config.js. Faili yako ya usanidi sasa imekamilika na inapaswa kuendana na kijisehemu kilicho hapa chini. Sehemu mpya pekee hapa ni resolvesehemu—tunatumia hili kuongeza lakabu kwenye faili zetu za chanzo ndani node_modulesili kuweka uagizaji rahisi iwezekanavyo.
```
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
  }
}
```
Sasa, hebu tuagize CSS ya Bootstrap. Ongeza yafuatayo ili src/scss/styles.scsskuleta vyanzo vyote vya Bootstrap Sass.
```
// Import all of Bootstrap's CSS
@import "~bootstrap/scss/bootstrap";
```
Unaweza pia kuagiza laha zetu za mitindo kibinafsi ikiwa unataka. Soma hati zetu za kuagiza za Sass kwa maelezo zaidi.
Ifuatayo tunapakia CSS na kuagiza JavaScript ya Bootstrap. Ongeza yafuatayo ili src/js/main.jskupakia CSS na kuagiza JS zote za Bootstrap. Popper italetwa kiotomatiki kupitia Bootstrap.
```
// Import our custom CSS
import '../scss/styles.scss'

// Import all of Bootstrap's JS
import * as bootstrap from 'bootstrap'
```
Unaweza pia kuagiza programu jalizi za JavaScript kibinafsi kama inahitajika ili kupunguza ukubwa wa vifurushi:
```
import Alert from 'bootstrap/js/dist/alert';

// or, specify which plugins you need:
import { Tooltip, Toast, Popover } from 'bootstrap';
```
Soma hati zetu za JavaScript kwa maelezo zaidi kuhusu jinsi ya kutumia programu jalizi za Bootstrap.
Na umemaliza! 🎉 Kwa chanzo cha Bootstrap Sass na JS zikiwa zimepakiwa kikamilifu, seva yako ya usanidi ya karibu inapaswa sasa kuonekana hivi.

Sasa unaweza kuanza kuongeza vijenzi vyovyote vya Bootstrap unavyotaka kutumia. Hakikisha umeangalia mradi kamili wa mfano wa Vite wa jinsi ya kujumuisha Sass maalum ya ziada na uboresha muundo wako kwa kuleta tu sehemu za CSS na JS za Bootstrap unazohitaji.

Je, unaona jambo lisilofaa au lililopitwa na wakati hapa? Tafadhali fungua suala kwenye GitHub . Je, unahitaji usaidizi wa utatuzi? Tafuta au anza majadiliano kwenye GitHub.