Lebanta la Boot & Vite

Tlhahlo ya semmušo ya kamoo o ka akaretšago le go kgoboketša CSS le JavaScript ya Bootstrap mo protšekeng ya gago o diriša Vite.

Letlakaleng le

O nyaka go tlola go fihla mafelelong? Download khoutu ya mohlodi le demo ya go šoma ya tlhahlo ye go tšwa polokelong ya twbs/examples . O ka bula gape mohlala ka go StackBlitz bakeng sa go rulaganya ka go phela.

Beakanya

Re aga projeke ya Vite ka Bootstrap go tšwa mathomong, ka fao go na le dinyakwa tše dingwe tša pele le dikgato tša pele pele re ka thoma e le ka kgonthe. Tlhahlo ye e nyaka gore o be le Node.js yeo e hlomilwego le go tlwaelana mo gongwe le terminal.

Theha foldara ya porojeke e ne le setup npm. Re tla hlama my-projectfoltara gomme ra thoma npm ka -yngangišano go efoga go re botšiša dipotšišo ka moka tša tirišano.
```
mkdir my-project && cd my-project
npm init -y
```
Tsenya Vite. Go fapana le tlhahlo ya rena ya Webpack, go na le go ithekga ga sedirišwa se tee fela sa go aga mo. Re šomiša --save-devgo laetša gore go ithekga mo ke fela ga tšhomišo ya tlhabollo e sego ya tšweletšo.
```
npm i --save-dev vite
```
Kenya Bootstrap. Bjale re ka tsenya Bootstrap. Re tla tsenya gape Popper ka ge di-dropdown tša rena, di-popover, le di-tooltips di ithekgile ka yona bakeng sa go beakanya ga tšona. Ge o sa rulaganye go šomiša dikarolo tšeo, o ka tlogela Popper mo.
```
npm i --save bootstrap @popperjs/core
```
Tsenya go ithekga ga tlaleletšo. Go tlaleletša go Vite le Bootstrap, re hloka go ithekga mo gongwe (Sass) go tsenya ka tshwanelo le go kgoboketša CSS ya Bootstrap.
```
npm i --save-dev sass
```

Bjale ka ge re na le ditshepetšo ka moka tše di nyakegago tše di hlomilwego le go hloma, re ka tsena mošomong wa go hlama difaele tša projeke le go tsenya ka ntle Bootstrap.

Sebopego sa porojeke

Re šetše re hlotše my-projectfoldara gomme ra thoma npm. Bjale re tla hlama gape le srcfoltara ya rena, letlakala la setaele, le faele ya JavaScript go feleletša sebopego sa projeke. Matha tše di latelago go tšwa go my-project, goba o hlama ka seatla sebopego sa foltara le faele ye e bontšhitšwego ka mo tlase.

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

Ge o feditše, projeke ya gago ye e feletšego e swanetše go lebelega ka tsela ye:

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

Mo nakong ye, se sengwe le se sengwe se lefelong le le swanetšego, eupša Vite e ka se šome ka gobane ga se ra tlatša ya rena vite.config.jsgo fihla ga bjale.

Beakanya Vite

Ka ditshepetšo tše di hlomilwego le foltara ya rena ya projeke e loketše gore re thome go ngwala dikhoutu, bjale re ka beakanya Vite le go sepetša porojeke ya rena ka mo nageng.

Bula vite.config.jska go morulaganyi wa gago. Ka ge e se na selo, re tla swanelwa ke go oketša config ye nngwe ya boilerplate go yona gore re kgone go thoma seva ya rena. Karolo ye ya config e botša Vite e be e le go nyaka JavaScript ya projeke ya rena le kamoo seva ya tlhabollo e swanetšego go itshwara ka gona (go goga go tšwa go srcfoltara ka go laetša gape mo go fišago).
```
const path = require('path')

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

Se se latelago re tlatša src/index.html. Ye ke letlakala la HTML leo Vite e tlago go laetša ka gare ga sephephediši go šomiša CSS le JS yeo e kopantšwego yeo re tlago e tlaleletša go yona megatong ya ka morago.

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

Re akaretša go se nene ga go setaele ga Bootstrap mo ka div class="container"le <button>gore re bone ge CSS ya Bootstrap e imelwa ke Vite.

Bjale re hloka script ya npm go sepetša Vite. Bula package.jsongomme o tlaleletše startsengwalwa seo se bontšhitšwego ka mo tlase (o swanetše go ba o šetše o na le sengwalwa sa teko). Re tla šomiša sengwalwa se go thoma seva ya rena ya selegae ya Vite dev.
```
{
  // ...
  "scripts": {
    "start": "vite",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  // ...
}
```
Gomme mafelelong, re ka thoma Vite. Go tšwa go my-projectfoltara ka gare ga terminal ya gago, sepetša sengwalwa seo sa npm seo se sa tšwago go okeletšwa:
```
npm start
```

Karolong ye e latelago le ya mafelelo go tlhahlo ye, re tla tsenya ka ntle ka moka ga CSS le JavaScript ya Bootstrap.

Tsenya ka ntle Bootstrap

Beakanya go tsenya ga Sass ga Bootstrap ka go vite.config.js. Faele ya gago ya peakanyo bjale e feletše gomme e swanetše go swana le seripa se se lego ka mo tlase. Karolo e nnoši e mpsha mo ke resolvekarolo—re diriša se go oketša leina le lengwe go difaele tša rena tša mothopo ka gare node_modulesgo boloka dilo tše di tšwago ka ntle di le bonolo ka mo go kgonegago.
```
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
  }
}
```
Bjale, a re tsenyeng CSS ya Bootstrap. Oketša tše di latelago go src/scss/styles.scssgo tsenya ka moka ga mohlodi wa Bootstrap Sass.
```
// Import all of Bootstrap's CSS
@import "~bootstrap/scss/bootstrap";
```
O ka tsenya gape le matlakala a rena a ditaele ka botee ge o nyaka. Bala ditokomane tša rena tša go tsenya ka ntle tša Sass bakeng sa dintlha.
Se se latelago re laetša CSS gomme re tsenya JavaScript ya Bootstrap. Oketša tše di latelago go src/js/main.jsgo laetša CSS gomme o tsenye ka moka ga JS ya Bootstrap. Popper e tla tlišwa ka ntle ka go itiragalela ka Bootstrap.
```
// Import our custom CSS
import '../scss/styles.scss'

// Import all of Bootstrap's JS
import * as bootstrap from 'bootstrap'
```
O ka tsenya gape di-plugin tša JavaScript ka botee ge go nyakega go boloka bogolo bja diphuthelwana bo le fase:
```
import Alert from 'bootstrap/js/dist/alert';

// or, specify which plugins you need:
import { Tooltip, Toast, Popover } from 'bootstrap';
```
Bala ditokomane tša rena tša JavaScript bakeng sa tshedimošo e oketšegilego mabapi le kamoo o ka dirišago di-plugin tša Bootstrap.
Gomme o feditše! 🎉 Ka mohlodi wa Bootstrap Sass le JS di imelwa ka botlalo, seva ya gago ya tlhabollo ya selegae bjale e swanetše go lebelega ka tsela ye.

Bjale o ka thoma go oketša dikarolo dife goba dife tša Bootstrap tšeo o nyakago go di diriša. Kgonthiša gore o hlahloba projeke ya mohlala ya Vite ye e feletšego ya kamoo o ka akaretšago Sass ya tlaleletšo ya tlwaelo le go kaonafatša go aga ga gago ka go tsenya ka ntle fela dikarolo tša CSS le JS tša Bootstrap tšeo o di hlokago.

O bona selo se sengwe se se fošagetšego goba seo se fetilwego ke nako mo? Hle bula taba go GitHub . O hloka thušo ya go rarolla mathata? Batla goba o thome poledišano go GitHub.