بوټسټریپ او ویټ

د ویټ په کارولو سره ستاسو په پروژه کې د بوټسټریپ CSS او جاواسکریپټ شاملولو او بنډل کولو څرنګوالي لپاره رسمي لارښود.

په دې پاڼه کې

غواړئ چې پای ته ورسیږئ؟ د دې لارښود لپاره د سرچینې کوډ او کاري ډیمو ډاونلوډ کړئ د twbs/examples repository څخه . تاسو کولی شئ د ژوندی ترمیم لپاره په StackBlitz کې مثال هم خلاص کړئ .

چمتو کول

موږ له سکریچ څخه د بوټسټریپ سره د ویټ پروژه رامینځته کوو ، نو دلته ځینې شرایط شتون لري او مخکې له دې چې موږ واقعیا پیل وکړو. دا لارښود تاسو ته اړتیا لري چې Node.js نصب کړئ او د ټرمینل سره یو څه پیژندنه ولرئ.

د پروژې فولډر جوړ کړئ او npm تنظیم کړئ. موږ به my-projectفولډر جوړ کړو او د استدلال سره npm پیل -yکړو ترڅو له موږ څخه د ټولو متقابلو پوښتنو څخه مخنیوی وشي.
```
mkdir my-project && cd my-project
npm init -y
```
ویټ نصب کړئ. زموږ د ویبپیک لارښود برخلاف ، دلته یوازې د جوړونې وسیلې انحصار شتون لري. موږ --save-devد سیګنال لپاره کاروو چې دا انحصار یوازې د پراختیا کارونې لپاره دی نه د تولید لپاره.
```
npm i --save-dev vite
```
بوټسټریپ نصب کړئ. اوس موږ کولی شو بوټسټریپ نصب کړو. موږ به پوپر هم نصب کړو ځکه چې زموږ ډراپ ډاونونه، پاپورونه، او اوزار ټیپونه د دوی موقعیت لپاره پدې پورې اړه لري. که تاسو د دې اجزاوو کارولو پلان نه لرئ، تاسو کولی شئ دلته پوپر پریږدئ.
```
npm i --save bootstrap @popperjs/core
```
اضافي انحصار نصب کړئ. د Vite او Bootstrap سربیره، موږ د بوټسټریپ CSS په سمه توګه واردولو او بنډل کولو لپاره بل انحصار (Sass) ته اړتیا لرو.
```
npm i --save-dev sass
```

اوس چې موږ ټول اړین انحصارونه نصب او تنظیم کوو، موږ کولی شو د پروژې فایلونو جوړولو او د بوټسټریپ واردولو کار ته ورسیږو.

د پروژې جوړښت

موږ لا دمخه my-projectفولډر جوړ کړی او npm یې پیل کړی دی. اوس به موږ خپل srcفولډر، سټایل شیټ، او جاواسکریپټ فایل هم جوړ کړو ترڅو د پروژې جوړښت بشپړ کړي. د لاندې څخه چل کړئ my-project، یا په لاسي ډول د فولډر او فایل جوړښت جوړ کړئ چې لاندې ښودل شوي.

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

کله چې تاسو ترسره کوئ، ستاسو بشپړه پروژه باید داسې ښکاري:

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

په دې وخت کې، هر څه په سم ځای کې دي، مګر ویټ به کار ونکړي ځکه چې موږ vite.config.jsتر اوسه خپل ډک نه دی کړی.

Vite ترتیب کړئ

د انحصارونو نصبولو سره او زموږ د پروژې فولډر زموږ لپاره د کوډ کولو پیل کولو لپاره چمتو دی ، موږ اوس کولی شو ویټ تنظیم کړو او زموږ پروژه په ځایی ډول پرمخ یوسو.

vite.config.jsپه خپل مدیر کې خلاص کړئ. ځکه چې دا خالي دی، موږ به اړتیا ولرو چې یو څه د بویلر پلیټ تشکیلات اضافه کړو نو موږ کولی شو خپل سرور پیل کړو. د ترتیب دا برخه ویټ ته وایی چې زموږ د پروژې جاواسکریپټ په لټه کې و او د پراختیا سرور باید څنګه چلند وکړي (د srcګرم ریلوډ سره د فولډر څخه ایستل).
```
const path = require('path')

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

بیا موږ ډکوو src/index.html. دا د HTML پاڼه ده Vite به په براوزر کې د بنډل شوي CSS او JS کارولو لپاره پورته شي چې موږ به یې په راتلونکو ګامونو کې اضافه کړو.

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

موږ دلته د بوټسټریپ سټایل لږ څه شامل کوو div class="container"او <button>له همدې امله موږ وګورو کله چې د بوټسټریپ سی ایس ایس د ویټ لخوا پورته کیږي.

اوس موږ د ویټ چلولو لپاره د npm سکریپټ ته اړتیا لرو. لاندې ښودل شوی سکریپټ خلاص package.jsonکړئ او اضافه startکړئ (تاسو باید دمخه د ازموینې سکریپټ ولرئ). موږ به دا سکریپټ زموږ د ځایی ویټ دیو سرور پیل کولو لپاره وکاروو.
```
{
  // ...
  "scripts": {
    "start": "vite",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  // ...
}
```
او په نهایت کې ، موږ کولی شو ویټ پیل کړو. ستاسو په ټرمینل کې د my-projectفولډر څخه، دا نوی اضافه شوی npm سکریپټ چل کړئ:
```
npm start
```

د دې لارښود په راتلونکې او وروستۍ برخه کې، موږ به د بوټسټریپ ټول CSS او جاواسکریپټ وارد کړو.

بوټسټریپ وارد کړئ

په کې د بوټسټریپ ساس واردات تنظیم کړئ vite.config.js. ستاسو د ترتیب کولو فایل اوس بشپړ شوی او باید د لاندې ټوټې سره سمون ولري. دلته یوازینۍ نوې برخه برخه ده resolve— موږ دا کاروو ترڅو زموږ د سرچینې فایلونو کې یو عرف اضافه کړو node_modulesترڅو واردات د امکان تر حده ساده وساتو.
```
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
  }
}
```
اوس ، راځئ چې د بوټسټریپ سی ایس ایس وارد کړو. src/scss/styles.scssد بوټسټریپ ټولې سرچینې ساس واردولو لپاره لاندې اضافه کړئ .
```
// Import all of Bootstrap's CSS
@import "~bootstrap/scss/bootstrap";
```
تاسو کولی شئ زموږ سټایل شیټونه په انفرادي ډول وارد کړئ که تاسو وغواړئ. د جزیاتو لپاره زموږ د Sass وارداتو اسناد ولولئ .
بیا موږ CSS پورته کوو او د بوټسټریپ جاوا سکریپټ واردوو. د CSS پورته کولو لپاره لاندې اضافه کړئ src/js/main.jsاو د بوټسټریپ ټول JS وارد کړئ. پوپر به د بوټسټریپ له لارې په اوتومات ډول وارد شي.
```
// Import our custom CSS
import '../scss/styles.scss'

// Import all of Bootstrap's JS
import * as bootstrap from 'bootstrap'
```
تاسو کولی شئ د جاواسکریپټ پلگ انونه په انفرادي ډول وارد کړئ لکه څنګه چې اړتیا وي د بنډل اندازې ټیټ ساتلو لپاره:
```
import Alert from 'bootstrap/js/dist/alert';

// or, specify which plugins you need:
import { Tooltip, Toast, Popover } from 'bootstrap';
```
د بوټسټریپ پلگ انونو کارولو څرنګوالي په اړه د نورو معلوماتو لپاره زموږ جاواسکریپټ سندونه ولولئ .
او تاسو بشپړ شوي! 🎉 د بوټسټریپ سرچینې ساس او JS په بشپړ ډول بار شوي سره ، ستاسو سیمه ایز پرمختیایی سرور باید اوس داسې ښکاري.

اوس تاسو کولی شئ د بوټسټریپ هرې برخې اضافه کول پیل کړئ چې تاسو یې کارول غواړئ. ډاډ ترلاسه کړئ چې د Vite بشپړ مثال پروژه وګورئ چې څنګه اضافي دودیز ساس پکې شامل کړئ او یوازې د بوټسټریپ CSS او JS برخې واردولو سره خپل جوړښت غوره کړئ چې تاسو ورته اړتیا لرئ.

دلته یو څه غلط یا زوړ وګورئ؟ مهرباني وکړئ په GitHub کې یوه مسله خلاص کړئ . د ستونزې حل کولو کې مرستې ته اړتیا لرئ؟ په GitHub کې بحث وپلټئ یا پیل کړئ .