Bootstrap & Vite

Tataiso ea semmuso ea ho kenyelletsa le ho bokella Bootstrap's CSS le JavaScript morerong oa hau u sebelisa Vite.

Leqepheng lena

U batla ho tlola ho fihlela qetellong? Khoasolla khoutu ea mohloli le demo ea ho sebetsa bakeng sa tataiso ena ho tsoa polokelong ea twbs/mehlala . U ka boela ua bula mohlala ho StackBlitz bakeng sa liphetoho tse phelang.

Tlhophiso

Re ntse re aha projeke ea Vite ka Bootstrap ho tloha qalong, kahoo ho na le lintho tse hlokahalang le mehato e ka pele pele re ka qala. Tataiso ena e hloka hore u be le Node.js e kentsoeng le ho tloaelana le terminal.

Theha foldara ea projeke ebe u seta npm. Re tla theha my-projectfoldara ebe re qala npm ka -ykhang ho e qoba ho re botsa lipotso tsohle tse amanang.
```
mkdir my-project && cd my-project
npm init -y
```
Kenya Vite. Ho fapana le tataiso ea rona ea Webpack, ho na le sesebelisoa se le seng feela sa ho aha mona. Re sebelisa --save-devho bontša hore ts'episo ena ke ea ts'ebeliso ea nts'etsopele eseng bakeng sa tlhahiso.
```
npm i --save-dev vite
```
Kenya Bootstrap. Hona joale re ka kenya Bootstrap. Hape re tla kenya Popper kaha li-dropdown tsa rona, popover, le lisebelisoa tsa lisebelisoa li itšetlehile ka eona bakeng sa boemo ba tsona. Haeba u sa rera ho sebelisa likarolo tseo, u ka siea Popper mona.
```
npm i --save bootstrap @popperjs/core
```
Kenya ts'ehetso e eketsehileng. Ntle le Vite le Bootstrap, re hloka boitšepo bo bong (Sass) ho kenya le ho bokella CSS ea Bootstrap hantle.
```
npm i --save-dev sass
```

Kaha joale re na le litšepiso tsohle tse hlokahalang tse kentsoeng le ho seta, re ka qala ho sebetsa ho theha lifaele tsa projeke le ho kenya Bootstrap.

Sebopeho sa morero

Re se re thehile my-projectfoldara mme re kentse npm. Joale re tla boela re thehe srcfoldara ea rona, sheetsheet le faele ea JavaScript ho tlatsa sebopeho sa projeke. Etsa tse latelang ho tloha ho my-project, kapa u iketsetse foldara le sebopeho sa faele se bontšitsoeng ka tlase.

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

Ha o qetile, projeke ea hau e felletseng e lokela ho shebahala tjena:

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

Mothating ona, tsohle li sebakeng se nepahetseng, empa Vite e ke ke ea sebetsa hobane ha re so tlatse tsa rona vite.config.js.

Lokisa Vite

Kaha re na le litšepiso tse kentsoeng 'me foldara ea rona ea projeke e se e loketse hore re qale ho kenya likhoutu, joale re ka hlophisa Vite le ho tsamaisa morero oa rona sebakeng sa heno.

Bula vite.config.jsho mohlophisi oa hau. Kaha ha e na letho, re tla hloka ho kenya li-boilerplate config ho eona hore re tsebe ho qala seva ea rona. Karolo ena ea config e bolella Vite hore ba batle JavaScript ea morero oa rona le hore na seva sa nts'etsopele se lokela ho itšoara joang (ho hula ho tloha srcfoldareng ka ho kenya hape ho chesang).
```
const path = require('path')

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

Ka mor'a moo re tlatsa src/index.html. Lena ke leqephe la HTML Vite e tla kenya sebatli ho sebelisa CSS e bokelletsoeng mme JS re tla e kenyelletsa ho eona ka mor'a mehato.

<!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 kenyelletsa setaele sa Bootstrap mona le div class="container"le <button>hore re bone ha CSS ea Bootstrap e laeloa ke Vite.

Joale re hloka script ea npm ho tsamaisa Vite. Bula package.json'me u kenye startmongolo o bontšitsoeng ka tlase (o tlameha hore ebe o se o ntse o e-na le lengolo la tlhahlobo). Re tla sebelisa sengoloa sena ho qala seva sa rona sa lehae sa Vite dev.
```
{
  // ...
  "scripts": {
    "start": "vite",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  // ...
}
```
'Me qetellong, re ka qala Vite. Ho tsoa my-projectfoldareng e ho terminal ea hau, tsamaisa mongolo o sa tsoa eketsoa oa npm:
```
npm start
```

Karolong e latelang le ea ho qetela ea tataiso ena, re tla kenya CSS le JavaScript kaofela tsa Bootstrap.

Kenya Bootstrap

Hlophisa Bootstrap's Sass import in vite.config.js. Faele ea hau ea litlhophiso e se e felile 'me e lokela ho ts'oana le snippet e ka tlase. Karolo e ncha feela mona ke resolvekarolo - re sebelisa sena ho kenyelletsa lebitso la li-alias ho lifaele tsa rona tsa mohloli kahare node_modulesho boloka thepa e tsoang kantle e le bonolo kamoo ho ka khonehang.
```
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
  }
}
```
Joale, ha re ke re kenye CSS ea Bootstrap. Kenya tse latelang ho src/scss/styles.scsskenya mehloli eohle ea Sass ea Bootstrap.
```
// Import all of Bootstrap's CSS
@import "~bootstrap/scss/bootstrap";
```
U ka boela ua kenya li-stylesheets tsa rona ka bonngoe haeba u batla. Bala litokomane tsa rona tsa Sass ho fumana lintlha.
Ka mor'a moo re kenya CSS ebe re kenya JavaScript ea Bootstrap. Kenya tse latelang ho src/js/main.jskenya CSS le ho kenya tsohle tsa Bootstrap's JS. Popper e tla romelloa kantle ho naha ka bo eona ka Bootstrap.
```
// Import our custom CSS
import '../scss/styles.scss'

// Import all of Bootstrap's JS
import * as bootstrap from 'bootstrap'
```
U ka kenya li-plugins tsa JavaScript ka bonngoe kamoo ho hlokahalang ho boloka boholo ba bongata bo le tlase:
```
import Alert from 'bootstrap/js/dist/alert';

// or, specify which plugins you need:
import { Tooltip, Toast, Popover } from 'bootstrap';
```
Bala litokomane tsa rona tsa JavaScript bakeng sa tlhaiso-leseling e batsi mabapi le mokhoa oa ho sebelisa li-plugins tsa Bootstrap.
Mme o qetile! 🎉 Kaha mohloli oa Bootstrap oa Sass le JS o tletse ka botlalo, seva sa hau sa nts'etsopele ea lehae se lokela ho shebahala tjena.

Joale o ka qala ho kenyelletsa lisebelisoa life kapa life tsa Bootstrap tseo u batlang ho li sebelisa. Etsa bonnete ba hore u sheba projeke e felletseng ea mohlala oa ho kenyelletsa tloaelo ea Sass le ho ntlafatsa moaho oa hau ka ho kenya likarolo tsa CSS tsa Bootstrap le JS feela tseo u li hlokang.

U bona ho hong ho phoso kapa e siiloe ke nako mona? Ka kopo bula bothata ho GitHub . U hloka thuso ea ho rarolla mathata? Batla kapa qala puisano ho GitHub.