Bootstrap & Vite

Hagaha rasmiga ah ee sida loogu daro oo loogu xidho Bootstrap's CSS iyo JavaScript ee mashruucaaga addoo isticmaalaya Vite.

Boggaan

Ma rabtaa inaad u gudubto ilaa dhamaadka? Ka soo deji koodka isha iyo muujinta shaqada ee hagahan hagaha twbs/tusaaleyaasha kaydka . Waxa kale oo aad tusaale ahaan ka furi kartaa StackBlitz si toos ah tafatirka.

Dejinta

Waxaan ku dhiseynaa mashruuc Vite ah oo leh Bootstrap xoq, marka waxaa jira shuruudo qaar iyo talaabooyin hore ka hor inta aanan si dhab ah u bilaabin. Hagahan waxa uu kaaga baahan yahay in lagu rakibo Node.js iyo in aad taqaanid terminalka.

Samee gal mashruuc oo deji npm. Waxaan abuuri doonaa my-projectgalka oo waxaan ku bilaabi doonaa npm -ydoodda si aan uga fogaano inay na weydiiso dhammaan su'aalaha isdhexgalka.
```
mkdir my-project && cd my-project
npm init -y
```
Ku rakib Vite. Si ka duwan hagahayaga xirmada shabakada, waxaa jira kaliya hal qalab oo ku tiirsanaanta halkan. Waxaan isticmaalnaa --save-devsi aan u muujinno in ku-tiirsanaantani ay tahay kaliya isticmaalka horumarinta ee aysan ahayn wax soo saar.
```
npm i --save-dev vite
```
Ku rakib Bootstrap Hadda waxaan ku rakibi karnaa Bootstrap. Waxaan sidoo kale ku rakibi doonaa Popper mar haddii hoos u dhigisteena, popovers, iyo qalabyada ay ku xiran yihiin meeleyntooda. Haddii aadan qorsheyneynin inaad isticmaasho qaybahaas, waxaad ka tagi kartaa Popper halkan.
```
npm i --save bootstrap @popperjs/core
```
Ku xidhid dheeraad ah Marka lagu daro Vite iyo Bootstrap, waxaan u baahanahay ku-tiirsanaan kale (Sass) si aan si sax ah u soo dejino oo aan ugu xidhno Bootstrap's CSS.
```
npm i --save-dev sass
```

Hadda oo aan haysano dhammaan ku tiirsanaanta lagama maarmaanka ah ee la rakibay iyo dejinta, waxaan heli karnaa shaqada abuurista faylasha mashruuca iyo soo dejinta Bootstrap.

Qaab dhismeedka mashruuca

Horay ayaan u abuurnay my-projectgalka oo aan bilownay npm. Hadda waxaan sidoo kale abuuri doonaa srcgalkeena, qaabka xaashida, iyo faylka JavaScript si aan u dhamaystirno qaab dhismeedka mashruuca. Ka socodsii kuwan soo socda my-project, ama gacanta ku samee galka iyo qaab dhismeedka faylka hoos ka muuqda.

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

Markaad dhammayso, mashruucaaga oo dhammaystiran waa inuu u ekaado sidan:

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

Waqtigan xaadirka ah, wax walbaa waxay ku yaalliin meesha saxda ah, laakiin Vite ma shaqeyn doonto sababtoo ah weli ma aanan buuxin vite.config.js.

Habee Vite

Iyada oo la rakibay ku-tiirsanaanta iyo galka mashruuca oo noo diyaar ah si aan u bilowno koodka, hadda waxaan habeyn karnaa Vite oo aan ku socodsiin karnaa mashruucayaga gudaha.

Ku fur vite.config.jstafatirahaaga Maaddaama ay bannaan tahay, waxaan u baahan doonaa inaan ku darno qaar ka mid ah qalabka kuleyliyaha si aan u bilowno server-keena. Qaybtan habayntu waxay u sheegaysaa Vite inay raadiyaan mashruucayada JavaScript-ka iyo sida adeegaha horumarku u dhaqmayo (ka soo jiidaya srcgalka dib u soo dejinta kulul).
```
const path = require('path')

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

Marka xigta waxaan buuxineynaa src/index.html. Kani waa bogga HTML Vite ayaa ku shubmi doona browserka si uu uga faa'iidaysto CSS-ga la xidhxidhay iyo JS waxaanu ku dari doonaa talaabooyinka danbe.

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

Waxaan halkan ku soo daraynaa wax yar oo Bootstrap ah oo ay la socdaan div class="container"iyo <button>si aan u aragno marka Bootstrap's CSS ay ku raran tahay Vite.

Hadda waxaan u baahanahay qoraal npm si aan u socodsiino Vite. Fur package.jsonoo ku dar startqoraalka hoos ku qoran (waa inaad horey u haysataa qoraalka imtixaanka). Waxaan u isticmaali doonaa qoraalkan si aan u bilowno server-ka Vite dev ee deegaankayaga.
```
{
  // ...
  "scripts": {
    "start": "vite",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  // ...
}
```
Ugu dambeyntiina, waxaan bilaabi karnaa Vite. Laga soo bilaabo my-projectgalka ku yaal terminaalkaaga, socodsii qoraalka npm ee dhowaan lagu daray:
```
npm start
```

Qaybta xigta iyo tan u dambaysa ee hagahan, waxaanu ku soo dejin doonaa dhammaan Bootstrap's CSS iyo JavaScript.

Soo dejinta Bootstrap

Deji Bootstrap's Sass soo dejinta gudaha vite.config.js. Faylka qaabeyntaagu hadda waa dhammaatay oo waa inuu la mid noqdaa qaybta hoose. Qaybta kaliya ee halkan ku cusub waa resolveqaybta-waxaan u isticmaalnaa tan si aan ugu darno magac loo yaqaan faylalka ishayaga gudaha node_modulessi aan u ilaalino soo dejinta sida ugu fudud ee suurtogalka ah.
```
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
  }
}
```
Hadda, aynu soo dejinno Bootstrap's CSS. Ku dar kuwa soo socda si src/scss/styles.scssaad u soo dejiso dhammaan Bootstrap's isha Sass.
```
// Import all of Bootstrap's CSS
@import "~bootstrap/scss/bootstrap";
```
Waxa kale oo aad soo dhoofsan kartaa xaashiyada qaab-dhismeedka shakhsi ahaan haddii aad rabto. Akhri dukumeentiyada soo dejinta Sass wixii faahfaahin ah.
Marka xigta waxaanu ku shubnaa CSS-ka oo aanu soo dajinaa Bootstrap's JavaScript. Ku dar kuwa soo socda si src/js/main.jsaad ugu shubto CSS oo aad u soo dejiso dhammaan Bootstrap's JS Popper si toos ah ayaa looga soo dejin doonaa Bootstrap.
```
// Import our custom CSS
import '../scss/styles.scss'

// Import all of Bootstrap's JS
import * as bootstrap from 'bootstrap'
```
Waxa kale oo aad soo dejin kartaa plugins JavaScript si gaar ah haddii loo baahdo si loo yareeyo xidhmooyinka xidhmo:
```
import Alert from 'bootstrap/js/dist/alert';

// or, specify which plugins you need:
import { Tooltip, Toast, Popover } from 'bootstrap';
```
Akhri dokumentiyadayada JavaScript si aad u hesho macluumaad dheeraad ah oo ku saabsan sida loo isticmaalo Bootstrap plugins.
Adiguna waad dhammaatay! 🎉 Iyada oo isha Bootstrap Sass iyo JS si buuxda loo raray, server-ka horumarinta deegaankaagu hadda waa inuu u ekaadaa sidan.

Hadda waxaad bilaabi kartaa inaad ku darto wax kasta oo ka kooban Bootstrap aad rabto inaad isticmaasho. Hubi inaad hubiso mashruuca tusaale ahaan Vite oo dhamaystiran sida loogu daro Sass caado ah oo dheeri ah oo aad u wanaajiso dhismahaaga adigoo soo dejinaya kaliya qaybaha Bootstrap's CSS iyo JS ee aad u baahan tahay.

Halkan ka arag wax khaldan ama dhacay? Fadlan ku fur arrin GitHub . Ma u baahan tahay caawimo cilad-raadinta? Ka raadi ama ka bilow dood GitHub.