I-Bootstrap kunye neVite

Isikhokelo esisemthethweni sendlela yokubandakanya kunye nokudibanisa i-Bootstrap's CSS kunye neJavaScript kwiprojekthi yakho usebenzisa iVite.

Kweli phepha

Ngaba ufuna ukutsiba ukuya esiphelweni? Khuphela ikhowudi yomthombo kunye nedemo yokusebenza kwesi sikhokelo kwi- twbs/imizekelo yokugcina . Unako kwakhona ukuvula umzekelo kwi-StackBlitz ukuze uhlele ngokuphila.

Misela

Sakha iprojekthi yeVite ngeBootstrap ukusuka ekuqaleni, ke kukho izinto eziyimfuneko kunye namanyathelo angaphambili ngaphambi kokuba siqalise ngokwenene. Esi sikhokelo sifuna ukuba ube neNode.js efakiweyo kunye nokuqhelana ne-terminal.

Yenza ifolda yeprojekthi kunye nokuseta i-npm. Siza kudala my-projectifolda kwaye siqalise i-npm -yngengxoxo ukuyinqanda ukusibuza yonke imibuzo esebenzisanayo.
```
mkdir my-project && cd my-project
npm init -y
```
Faka iVite. Ngokungafaniyo nesikhokelo sethu seWebpack, kukho ukuxhomekeka kwesixhobo esinye kuphela apha. Sisebenzisa --save-devukubonakalisa ukuba oku kuxhomekeka kukusetyenziswa kophuhliso kuphela hayi imveliso.
```
npm i --save-dev vite
```
Faka i-Bootstrap. Ngoku sinokufaka i-Bootstrap. Siza kuphinda siyifake iPopper ukusukela oko ukwehla kwethu, iipopovers, kunye neengcebiso zesixhobo zixhomekeke kuyo ngokuma kwazo. Ukuba awucwangcisi ukusebenzisa ezo zixhobo, ungashiya iPopper apha.
```
npm i --save bootstrap @popperjs/core
```
Faka ukuxhomekeka okongeziweyo. Ukongeza kwi-Vite kunye ne-Bootstrap, sifuna omnye ukuxhomekeka (Sass) ukungenisa ngokufanelekileyo kunye nokudibanisa i-CSS ye-Bootstrap.
```
npm i --save-dev sass
```

Ngoku ukuba sinabo bonke ukuxhomekeka okufunekayo okufakiweyo kunye nokuseta, singakwazi ukufumana umsebenzi wokudala iifayile zeprojekthi kunye nokungenisa i-Bootstrap.

Ubume beprojekthi

Sele siyile my-projectifolda kwaye saqalisa i-npm. Ngoku siza kudala srcifolda yethu, icwecwe lesimbo, kunye nefayile yeJavaScript ukujikeleza ubume beprojekthi. Qhuba oku kulandelayo ukusuka my-project, okanye wenze ngesandla isiqulathi seefayili kunye nesakhiwo sefayile eboniswe ngezantsi.

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

Xa ugqibile, iprojekthi yakho epheleleyo kufuneka ijongeke ngolu hlobo:

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

Okwangoku, yonke into ikwindawo elungileyo, kodwa iVite ayizukusebenza kuba asikagcwalisi yethu vite.config.js.

Qwalasela iVite

Ngokuxhomekeka okufakwe kunye nefolda yethu yeprojekthi ilungele ukuba siqale ikhowudi, ngoku sinokuyiqwalasela iVite kwaye siqhube iprojekthi yethu kwindawo.

Vula vite.config.jskumhleli wakho. Kuba ingenanto, kuya kufuneka songeze i-boilerplate config kuyo ukuze siqalise umncedisi wethu. Le nxalenye yoqwalaselo ixelela iVite ukuba ijonge iJavaScript yeprojekthi yethu kunye nendlela umncedisi wophuhliso ekufuneka aziphathe ngayo (ukutsala srckwifolda ngokulayishwa kwakhona okushushu).
```
const path = require('path')

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

Okulandelayo sizalisa src/index.html. Eli liphepha le-HTML iVite iya kulayisha kwibhrawuza ukusebenzisa i-CSS ehlanganisiweyo kunye ne-JS siya kuyongeza kuyo kumanyathelo amva.

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

Sibandakanya isitayile esincinci seBootstrap apha kunye div class="container"kwaye <button>ukuze sibone xa i-Bootstrap's CSS ilayishwa nguVite.

Ngoku sifuna iskripthi se-npm ukuqhuba iVite. Vula package.jsonkwaye wongeze startiskripthi esiboniswe ngezantsi (kufuneka ube sele unaso iskripthi sovavanyo). Siza kusebenzisa esi script ukuqalisa iseva yethu yeVite dev.
```
{
  // ...
  "scripts": {
    "start": "vite",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  // ...
}
```
Kwaye ekugqibeleni, sinokuqala iVite. Ukusuka my-projectkwifolda kwi-terminal yakho, sebenzisa eso skripthi se-npm esitsha:
```
npm start
```

Kwicandelo elilandelayo nelokugqibela kwesi sikhokelo, siza kungenisa yonke i-Bootstrap's CSS kunye neJavaScript.

Thatha ngaphandle i-Bootstrap

Misela i-Bootstrap's Sass yokungenisa ngaphakathi vite.config.js. Ifayile yakho yoqwalaselo ngoku igqityiwe kwaye kufuneka ihambelane nesnippet engezantsi. Inxalenye entsha kuphela apha resolvelicandelo-sisebenzisa oku ukongeza i-alias kwiifayile zethu zomthombo ngaphakathi node_modulesukugcina ukungenisa ngaphandle kulula kangangoko kunokwenzeka.
```
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
  }
}
```
Ngoku, masingenise i-CSS ye-Bootstrap. Yongeza oku kulandelayo src/scss/styles.scssukungenisa yonke imvelaphi yeBootstrap yeSass.
```
// Import all of Bootstrap's CSS
@import "~bootstrap/scss/bootstrap";
```
Ungangenisa amaxwebhu ethu esitayile ngokwahlukeneyo ukuba uyafuna. Funda amaxwebhu wethu we-Sass wokungenisa iinkcukacha.
Okulandelayo silayisha iCSS kwaye singenise iJavaScript yeBootstrap. Yongeza oku kulandelayo src/js/main.jsukulayisha iCSS kwaye ungenise yonke i-Bootstrap's JS. I-Popper iyakungeniswa ngaphandle ngokuzenzekelayo ngeBootstrap.
```
// Import our custom CSS
import '../scss/styles.scss'

// Import all of Bootstrap's JS
import * as bootstrap from 'bootstrap'
```
Ungangenisa iiplagi zeJavaScript nganye nganye njengoko kufuneka ukugcina ubungakanani benqwaba phantsi:
```
import Alert from 'bootstrap/js/dist/alert';

// or, specify which plugins you need:
import { Tooltip, Toast, Popover } from 'bootstrap';
```
Funda amaxwebhu ethu eJavaScript ngolwazi olungakumbi malunga nendlela yokusebenzisa iiplagi zeBootstrap.
Kwaye ugqibile! 🎉 Ngomthombo we-Bootstrap we-Sass kunye ne-JS elayishwe ngokupheleleyo, iseva yakho yophuhliso yasekhaya ngoku kufuneka ijongeke ngolu hlobo.

Ngoku ungaqala ukongeza naziphi na izinto zeBootstrap ofuna ukuzisebenzisa. Qiniseka ukuba ujonge iprojekthi yeVite epheleleyo yendlela yokubandakanya i-Sass yesiko elongezelelweyo kunye nokwandisa ukwakha kwakho ngokungenisa kuphela iinxalenye ze-Bootstrap's CSS kunye ne-JS oyifunayo.

Uyabona into engalunganga okanye ephelelwe lixesha apha? Nceda uvule umba kwi-GitHub . Ngaba ufuna uncedo lokulungisa ingxaki? Khangela okanye uqale ingxoxo kwi-GitHub.