Bootstrap & Vite

Chitsogozo chovomerezeka chamomwe mungaphatikizire ndikumanga mtolo wa Bootstrap's CSS ndi JavaScript mu polojekiti yanu pogwiritsa ntchito Vite.

Patsamba ili

Mukufuna kulumpha mpaka kumapeto? Tsitsani kachidindo kochokera ndi chiwonetsero chogwirira ntchito cha bukhuli kuchokera pankhokwe ya twbs/examples . Mutha kutsegulanso chitsanzo mu StackBlitz kuti musinthe pompopompo.

Khazikitsa

Tikupanga pulojekiti ya Vite ndi Bootstrap kuyambira poyambira, ndiye pali zofunikira zina ndi masitepe akutsogolo tisanayambe. Bukuli likufuna kuti muyike Node.js komanso kudziwa zambiri za terminal.

Pangani chikwatu cha polojekiti ndikukhazikitsa npm. Tipanga my-projectchikwatu ndikuyambitsa npm ndi -ymkangano kuti tipewe kutifunsa mafunso onse okhudzana.
```
mkdir my-project && cd my-project
npm init -y
```
Ikani Vite. Mosiyana ndi kalozera wathu wa Webpack, pali chida chimodzi chokha chodalira pano. Timagwiritsa ntchito --save-devkuwonetsa kuti kudalira uku ndikungogwiritsa ntchito chitukuko osati kupanga.
```
npm i --save-dev vite
```
Ikani Bootstrap. Tsopano titha kukhazikitsa Bootstrap. Tikhazikitsanso Popper popeza zotsikira, popovers, ndi zida zothandizira zimatengera momwe zilili. Ngati simukukonzekera kugwiritsa ntchito zigawozi, mutha kusiya Popper apa.
```
npm i --save bootstrap @popperjs/core
```
Ikani zina zodalira. Kuphatikiza pa Vite ndi Bootstrap, tifunika kudalira kwina (Sass) kuti tilowetse bwino ndikumanga CSS ya Bootstrap.
```
npm i --save-dev sass
```

Tsopano popeza tili ndi zofunikira zonse zomwe zidayikidwa ndikukhazikitsa, titha kugwira ntchito yopanga mafayilo a polojekiti ndikulowetsa Bootstrap.

Kapangidwe ka polojekiti

Tapanga kale my-projectchikwatu ndikuyambitsa npm. Tsopano tipanganso chikwatu chathu src, masitayelo, ndi fayilo ya JavaScript kuti tikwaniritse dongosolo la polojekitiyi. Yendetsani zotsatirazi kuchokera ku my-project, kapena pangani pamanja chikwatu ndi mawonekedwe a fayilo omwe akuwonetsedwa pansipa.

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

Mukamaliza, polojekiti yanu yonse iyenera kuwoneka motere:

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

Pakadali pano, zonse zili pamalo oyenera, koma Vite sizigwira ntchito chifukwa sitinadzazebe zathu vite.config.js.

Konzani Vite

Ndi zodalira zomwe zayikidwa ndi foda yathu ya polojekiti yokonzeka kuti tiyambe kukopera, tsopano tikhoza kukonza Vite ndikuyendetsa polojekiti yathu kwanuko.

Tsegulani vite.config.jsmkonzi wanu. Popeza ilibe kanthu, tifunika kuwonjezera ma boilerplate config kuti tithe kuyambitsa seva yathu. Gawo ili la kasinthidwe limauza Vite kuti ayang'ane JavaScript ya polojekiti yathu ndi momwe seva yachitukuko iyenera kuchitira (kukoka kuchokera srcpafoda ndikuyikanso kotentha).
```
const path = require('path')

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

Kenako timadzaza src/index.html. Ili ndiye tsamba la HTML Vite adzayika mu msakatuli kuti agwiritse ntchito CSS yolumikizidwa ndipo JS tidzawonjezerapo pambuyo pake.

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

Tikuphatikiza masitayelo pang'ono a Bootstrap apa ndi div class="container"komanso <button>kuti tiwone pomwe Bootstrap's CSS imadzazidwa ndi Vite.

Tsopano tikufunika npm script kuti tiyendetse Vite. Tsegulani package.jsonndikuwonjezera startzolemba zomwe zili pansipa (muyenera kukhala ndi zolemba zoyeserera). Tigwiritsa ntchito script iyi kuyambitsa seva yathu ya Vite dev.
```
{
  // ...
  "scripts": {
    "start": "vite",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  // ...
}
```
Ndipo potsiriza, tikhoza kuyamba Vite. Kuchokera pa my-projectchikwatu chomwe chili mu terminal yanu, yendetsani npm script yatsopanoyo:
```
npm start
```

Mu gawo lotsatira komanso lomaliza la bukhuli, tibweretsa ma CSS onse a Bootstrap ndi JavaScript.

Lowetsani Bootstrap

Konzani Bootstrap's Sass import in vite.config.js. Fayilo yanu yosinthira tsopano yatha ndipo iyenera kufanana ndi mawu omwe ali pansipa. Gawo lokhalo pano ndi resolvegawoli - timagwiritsa ntchito izi kuwonjezera dzina ku mafayilo athu mkati node_moduleskuti tisunge zinthu zosavuta momwe tingathere.

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

Tsopano, tiyeni tilowetse CSS ya Bootstrap. Onjezani zotsatirazi kuti src/scss/styles.scssmulowetse Sass yonse ya Bootstrap.
```
// Import all of Bootstrap's CSS
@import "~bootstrap/scss/bootstrap";
```
Mutha kuitanitsanso masitayelo athu payekhapayekha ngati mukufuna. Werengani zolemba zathu za Sass kuti mumve zambiri.
Kenako timayika CSS ndikulowetsa JavaScript ya Bootstrap. Onjezani zotsatirazi kuti src/js/main.jsmukweze CSS ndikulowetsa zonse za Bootstrap's JS. Popper idzatumizidwa kunja kudzera mu Bootstrap.
```
// Import our custom CSS
import '../scss/styles.scss'

// Import all of Bootstrap's JS
import * as bootstrap from 'bootstrap'
```
Mutha kulowetsanso mapulagini a JavaScript payekhapayekha ngati pakufunika kuti mitolo ikhale pansi:
```
import Alert from 'bootstrap/js/dist/alert';

// or, specify which plugins you need:
import { Tooltip, Toast, Popover } from 'bootstrap';
```
Werengani zolemba zathu za JavaScript kuti mudziwe zambiri zamomwe mungagwiritsire ntchito mapulagini a Bootstrap.
Ndipo mwatha! 🎉 Ndi gwero la Bootstrap la Sass ndi JS litadzaza, seva yanu yachitukuko yakumaloko iyenera kuwoneka chonchi.

Tsopano mutha kuyamba kuwonjezera zida zilizonse za Bootstrap zomwe mukufuna kugwiritsa ntchito. Onetsetsani kuti mwayang'ana projekiti yathunthu ya Vite yamomwe mungaphatikizire Sass zina zachikhalidwe ndikuwongolera zomanga zanu potumiza zigawo za Bootstrap's CSS ndi JS zomwe mukufuna.

Mukuwona cholakwika kapena chachikale apa? Chonde tsegulani vuto pa GitHub . Mukufuna thandizo lazovuta? Sakani kapena yambitsani zokambirana pa GitHub.