I-Bootstrap & Vite

Umhlahlandlela osemthethweni wokuthi ungayifaka kanjani futhi uyihlanganise kanjani i-CSS ye-Bootstrap ne-JavaScript kuphrojekthi yakho usebenzisa i-Vite.

Kuleli khasi

Ufuna ukweqela ekupheleni? Dawuniloda ikhodi yomthombo kanye nedemo yokusebenza yalo mhlahlandlela endaweni yokugcina ye- twbs/izibonelo . Ungakwazi futhi ukuvula isibonelo ku-StackBlitz ukuze uhlele bukhoma.

Setha

Sakha iphrojekthi ye-Vite nge-Bootstrap kusukela ekuqaleni, ngakho-ke kukhona izimfuneko ezithile kanye nezinyathelo zangaphambili ngaphambi kokuthi siqale ngempela. Lo mhlahlandlela udinga ukuthi ufake i-Node.js kanye nokujwayelana netheminali.

Dala ifolda yephrojekthi bese usetha i-npm. Sizodala my-projectifolda futhi siqalise i-npm nge- -yagumenti ukuze siyigweme ukusibuza yonke imibuzo ephendulanayo.
```
mkdir my-project && cd my-project
npm init -y
```
Faka i-Vite. Ngokungafani nomhlahlandlela wethu we-Webpack, kunokuncika kwethuluzi elilodwa kuphela lokwakha lapha. Sisebenzisa --save-devukukhombisa ukuthi lokhu kwencika okokusetshenziswa kwentuthuko kuphela hhayi okokukhiqiza.
```
npm i --save-dev vite
```
Faka i-Bootstrap. Manje sesingakwazi ukufaka i-Bootstrap. Sizophinda sifake i-Popper njengoba okwehliswayo kwethu, ama-popvers, namathiphu amathuluzi kuncike kuyo ukuze ibekwe. Uma ungahlelile ukusebenzisa lezo zingxenye, ungashiya i-Popper lapha.
```
npm i --save bootstrap @popperjs/core
```
Faka ukuncika okwengeziwe. Ngokungeziwe ku-Vite ne-Bootstrap, sidinga okunye ukuncika (i-Sass) ukuze singenise kahle futhi sihlanganise i-CSS ye-Bootstrap.
```
npm i --save-dev sass
```

Manje njengoba sesinakho konke ukuncika okudingekayo okufakiwe nokusethwayo, singakwazi ukuqala umsebenzi ngokudala amafayela wephrojekthi futhi singenise i-Bootstrap.

Isakhiwo sephrojekthi

Sesivele my-projectsiyidalile ifolda futhi saqalisa i-npm. Manje sizophinde sakhe srcifolda yethu, ishidi lesitayela, kanye nefayela le-JavaScript ukuze sihlanganise ukwakheka kwephrojekthi. Qalisa okulandelayo ukusuka ku- my-project, noma uzenzele ifolda nesakhiwo sefayela esiboniswe ngezansi.

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

Uma usuqedile, iphrojekthi yakho ephelele kufanele ibukeke kanje:

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

Njengamanje, yonke into isendaweni efanele, kodwa i-Vite ngeke isebenze ngoba asikakayigcwalisi eyethu vite.config.js.

Lungiselela i-Vite

Njengoba okuncikile kufakiwe kanye nefolda yethu yephrojekthi isilungele ukuthi siqale ukubhala amakhodi, manje singakwazi ukumisa i-Vite futhi siqhube iphrojekthi yethu endaweni.

Vula vite.config.jskusihleli sakho. Njengoba ingenalutho, kuzodingeka sengeze ukulungiselelwa kwe-boilerplate kuyo ukuze sikwazi ukuqala iseva yethu. Le ngxenye yokucushwa itshela i-Vite ukuthi kufanele ibheke i-JavaScript yephrojekthi yethu nokuthi iseva yokuthuthukisa kufanele iziphathe kanjani (idonsa srckufolda ngokulayisha kabusha okushisayo).
```
const path = require('path')

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

Okulandelayo sigcwalisa src/index.html. Leli yikhasi le-HTML elizolayishwa i-Vite esipheqululini ukuze isebenzise i-CSS ehlanganisiwe futhi i-JS sizoyengeza kuyo ngezinyathelo ezizayo.

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

Sifaka isitayela esincane se-Bootstrap lapha nokuthi div class="container"futhi <button>ukuze sibone lapho i-CSS ye-Bootstrap ilayishwa yi-Vite.

Manje sidinga iskripthi se-npm ukuze siqalise i-Vite. Vula package.jsonbese wengeza startumbhalo oboniswe ngezansi (kufanele usunaso kakade umbhalo wokuhlola). Sizosebenzisa lesi script ukuze siqale iseva yethu yendawo ye-Vite dev.
```
{
  // ...
  "scripts": {
    "start": "vite",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  // ...
}
```
Futhi ekugcineni, singakwazi ukuqala Vite. Kusuka my-projectkufolda ekutheminali yakho, sebenzisa lo mbhalo we-npm osanda kufakwa:
```
npm start
```

Esigabeni esilandelayo nesokugcina kulo mhlahlandlela, sizongenisa yonke i-CSS ye-Bootstrap ne-JavaScript.

Ngenisa i-Bootstrap

Setha ukungenisa kwe-Bootstrap's Sass ku- vite.config.js. Ifayela lakho lokumisa seliqedile futhi kufanele lifane namazwibela angezansi. Okuwukuphela kwengxenye entsha lapha resolveisigaba—sisebenzisa lokhu ukwengeza isibizo kumafayela ethu omthombo ngaphakathi node_modulesukuze sigcine ukungenisa kulula ngangokunokwenzeka.
```
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
  }
}
```
Manje, ake singenise i-CSS ye-Bootstrap. Engeza okulandelayo ukuze src/scss/styles.scssungenise wonke umthombo we-Bootstrap's Sass.
```
// Import all of Bootstrap's CSS
@import "~bootstrap/scss/bootstrap";
```
Ungangenisa futhi amashidi esitayela ethu ngawodwana uma ufuna. Funda amadokhumenti ethu okungenisa kwe-Sass ukuze uthole imininingwane.
Okulandelayo silayisha i-CSS futhi singenise i-JavaScript ye-Bootstrap. Engeza okulandelayo ukuze src/js/main.jsulayishe i-CSS futhi ungenise yonke i-JS ye-Bootstrap. I-Popper izongeniswa ngokuzenzakalelayo nge-Bootstrap.
```
// Import our custom CSS
import '../scss/styles.scss'

// Import all of Bootstrap's JS
import * as bootstrap from 'bootstrap'
```
Futhi ungangenisa ama-plugin e-JavaScript ngawodwana njengoba kudingeka ukuze ugcine osayizi benqwaba bephansi:
```
import Alert from 'bootstrap/js/dist/alert';

// or, specify which plugins you need:
import { Tooltip, Toast, Popover } from 'bootstrap';
```
Funda amadokhumenti ethu e-JavaScript ukuze uthole ulwazi olwengeziwe mayelana nendlela yokusebenzisa ama-plugin e-Bootstrap.
Futhi usuqedile! 🎉 Ngomthombo we-Bootstrap i-Sass ne-JS zilayishwe ngokugcwele, iseva yakho yokuthuthukisa yasendaweni kufanele manje ibukeke kanje.

Manje ungaqala ukwengeza noma yiziphi izingxenye ze-Bootstrap ofuna ukuzisebenzisa. Qiniseka ukuthi uhlola iphrojekthi yesibonelo ye-Vite ephelele yokuthi ungayifaka kanjani i-Sass yangokwezifiso eyengeziwe futhi uthuthukise isakhiwo sakho ngokungenisa kuphela izingxenye ze-Bootstrap's CSS ne-JS ozidingayo.

Ubona okuthile okungalungile noma okudlulelwe yisikhathi lapha? Sicela uvule inkinga ku-GitHub . Udinga usizo lokuxazulula inkinga? Sesha noma uqale ingxoxo ku-GitHub.