بوٽ اسٽريپ ۽ وائيٽ

Vite استعمال ڪندي Bootstrap جي CSS ۽ JavaScript کي توهان جي پروجيڪٽ ۾ ڪيئن شامل ۽ بنڊل ڪرڻ لاءِ سرڪاري گائيڊ.

هن صفحي تي

آخر تائين ڇڏڻ چاهيو ٿا؟ ڊائون لوڊ ڪريو سورس ڪوڊ ۽ ڪم ڪندڙ ڊيمو هن گائيڊ لاءِ twbs/examples repository مان . توھان پڻ کولي سگھو ٿا مثال StackBlitz ۾ لائيو ايڊيٽنگ لاءِ.

سيٽ اپ ڪريو

اسان شروع کان بوٽ اسٽريپ سان هڪ وائيٽ پروجيڪٽ ٺاهي رهيا آهيون، تنهنڪري اسان واقعي شروع ڪرڻ کان پهريان ڪجهه شرطون ۽ اڳيون قدم آهن. هي گائيڊ توهان کي گهربل آهي Node.js انسٽال ڪيو ۽ ٽرمينل سان ڪجهه واقفيت.

پروجيڪٽ فولڊر ٺاهيو ۽ سيٽ اپ ڪريو npm. اسان my-projectفولڊر ٺاهينداسين ۽ npm کي -yدليل سان شروع ڪنداسين ته ان کان بچڻ لاءِ اسان سڀني انٽرايڪٽو سوالن کان پڇڻ.
```
mkdir my-project && cd my-project
npm init -y
```
انسٽال ڪريو Vite. اسان جي ويب پيڪ گائيڊ جي برعڪس، هتي صرف هڪ تعميراتي اوزار جي انحصار آهي. اسان --save-devاهو اشارو ڏيڻ لاءِ استعمال ڪندا آهيون ته هي انحصار صرف ترقي جي استعمال لاءِ آهي ۽ نه پيداوار لاءِ.
```
npm i --save-dev vite
```
انسٽال ڪريو Bootstrap. ھاڻي اسان Bootstrap انسٽال ڪري سگھون ٿا. اسان پوپر پڻ انسٽال ڪنداسين ڇو ته اسان جا ڊراپ ڊائونز، پاپ اوور، ۽ ٽول ٽائپس ان تي منحصر آهن انهن جي پوزيشن لاءِ. جيڪڏهن توهان انهن اجزاء کي استعمال ڪرڻ تي منصوبو نه ٿا ڪريو، توهان هتي پوپر کي ختم ڪري سگهو ٿا.
```
npm i --save bootstrap @popperjs/core
```
اضافي انحصار کي انسٽال ڪريو. Vite ۽ Bootstrap کان علاوه، اسان کي Bootstrap جي CSS کي صحيح طرح درآمد ۽ بنڊل ڪرڻ لاءِ هڪ ٻي انحصار (Sass) جي ضرورت آهي.
```
npm i --save-dev sass
```

ھاڻي ته اسان وٽ تمام ضروري انحصار انسٽال ٿيل ۽ سيٽ اپ آھي، اسان ڪم ڪري سگھون ٿا پروجيڪٽ فائلون ٺاھيو ۽ بوٽ اسٽريپ درآمد ڪري.

منصوبي جي جوڙجڪ

اسان اڳ ۾ ئي my-projectفولڊر ٺاهي ڇڏيو آهي ۽ اين پي ايم جي شروعات ڪئي آهي. ھاڻي اسان پنھنجي 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 ڪم نه ڪندو ڇو ته اسان vite.config.jsاڃا تائين نه ڀريو آهي.

Vite کي ترتيب ڏيو

انحصار سان انسٽال ٿيل ۽ اسان جو پروجيڪٽ فولڊر اسان لاءِ ڪوڊنگ شروع ڪرڻ لاءِ تيار آهي، اسان هاڻي ويٽ کي ترتيب ڏئي سگهون ٿا ۽ مقامي طور تي اسان جي پروجيڪٽ کي هلائي سگهون ٿا.

vite.config.jsتوهان جي ايڊيٽر ۾ کوليو . جيئن ته اهو خالي آهي، اسان کي ان ۾ ڪجهه بوائلر پليٽ ترتيب شامل ڪرڻ جي ضرورت پوندي ته جيئن اسان پنهنجو سرور شروع ڪري سگهون. config جو هي حصو ٻڌائي ٿو وائيٽ اسان جي پروجيڪٽ جي جاوا اسڪرپٽ کي ڳولڻ لاءِ هئا ۽ ڊولپمينٽ سرور کي ڪيئن عمل ڪرڻ گهرجي ( 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>انهي ڪري ته اسان ڏسون ٿا جڏهن بوٽ اسٽريپ جي سي ايس ايس کي وائيٽ ذريعي لوڊ ڪيو ويندو آهي.
ھاڻي اسان کي وائيٽ هلائڻ لاءِ اين پي ايم اسڪرپٽ جي ضرورت آھي. کوليو package.json۽ startهيٺ ڏيکاريل اسڪرپٽ شامل ڪريو (توهان وٽ اڳ ۾ ئي ٽيسٽ اسڪرپٽ هجڻ گهرجي). اسان ھي اسڪرپٽ استعمال ڪنداسين پنھنجي مقامي Vite dev سرور کي شروع ڪرڻ لاءِ.
```
{
  // ...
  "scripts": {
    "start": "vite",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  // ...
}
```
۽ نيٺ، اسان شروع ڪري سگھون ٿا Vite. فولڊر مان my-projectتوھان جي ٽرمينل ۾، ھلايو اھو نئون شامل ٿيل npm اسڪرپٽ:
```
npm start
```

هن گائيڊ جي ايندڙ ۽ آخري حصي ۾، اسان سڀ بوٽ اسٽريپ جي CSS ۽ JavaScript درآمد ڪنداسين.

بوٽ اسٽريپ درآمد ڪريو

Bootstrap جي Sass import ۾ سيٽ اپ ڪريو 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
  }
}
```
ھاڻي، اچو ته درآمد ڪريون Bootstrap جي CSS. src/scss/styles.scssBootstrap جي سڀني ماخذ Sass کي درآمد ڪرڻ لاءِ ھيٺ ڏنل شامل ڪريو .
```
// Import all of Bootstrap's CSS
@import "~bootstrap/scss/bootstrap";
```
توھان پڻ درآمد ڪري سگھو ٿا اسان جي اسٽائل شيٽ انفرادي طور تي جيڪڏھن توھان چاھيو. تفصيل لاءِ اسان جا Sass درآمدي دستاويز پڙهو .
اڳتي اسان CSS لوڊ ڪريون ٿا ۽ بوٽ اسٽريپ جا جاوا اسڪرپٽ درآمد ڪريون ٿا. src/js/main.jsCSS کي لوڊ ڪرڻ لاءِ ھيٺ ڏنل شامل ڪريو ۽ سڀ بوٽ اسٽريپ جي 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';
```
Bootstrap جي پلگ ان کي ڪيئن استعمال ڪجي ان بابت وڌيڪ معلومات لاءِ اسان جا جاوا اسڪرپٽ جا دستاويز پڙهو .
۽ توهان ڪيو آهي! 🎉 بوٽ اسٽريپ جي ماخذ سان Sass ۽ JS مڪمل طور تي لوڊ ٿي ويو آهي، توهان جي مقامي ترقياتي سرور کي هاڻي هن وانگر ڏسڻ گهرجي.

ھاڻي توھان شروع ڪري سگھوٿا ڪو به بوٽ اسٽراپ اجزاء شامل ڪرڻ جيڪي توھان استعمال ڪرڻ چاھيو ٿا. چيڪ ڪرڻ جي پڪ ڪريو مڪمل Vite مثال پروجيڪٽ انهي لاءِ ته ڪيئن اضافي ڪسٽم ساس شامل ڪجي ۽ صرف بوٽ اسٽريپ جي CSS ۽ JS جا حصا درآمد ڪندي پنهنجي تعمير کي بهتر بڻائين جيڪي توهان کي گهربل آهن.

هتي ڪجهه غلط يا پراڻي ڏسو؟ مهرباني ڪري GitHub تي هڪ مسئلو کوليو . مسئلو حل ڪرڻ ۾ مدد جي ضرورت آهي؟ ڳوليو يا گيٽ هب تي بحث شروع ڪريو.