بوٹسٹریپ اور وائٹ

وائٹ کا استعمال کرتے ہوئے اپنے پروجیکٹ میں بوٹسٹریپ کے سی ایس ایس اور جاوا اسکرپٹ کو کیسے شامل اور بنڈل کرنا ہے اس کے لیے آفیشل گائیڈ۔

اس صفحہ پر

آخر تک جانا چاہتے ہیں؟ twbs/examples repository سے اس گائیڈ کے لیے سورس کوڈ اور ورکنگ ڈیمو ڈاؤن لوڈ کریں ۔ آپ لائیو ایڈیٹنگ کے لیے StackBlitz میں مثال بھی کھول سکتے ہیں۔

سیٹ اپ

ہم شروع سے Bootstrap کے ساتھ ایک Vite پروجیکٹ بنا رہے ہیں، لہذا اس سے پہلے کہ ہم واقعی شروع کر سکیں کچھ شرائط اور آگے کے اقدامات ہیں۔ اس گائیڈ کے لیے آپ کو Node.js انسٹال کرنے اور ٹرمینل سے کچھ واقفیت کی ضرورت ہے۔

ایک پروجیکٹ فولڈر بنائیں اور این پی ایم سیٹ اپ کریں۔ ہم my-projectفولڈر بنائیں گے اور npm کو -yدلیل کے ساتھ شروع کریں گے تاکہ ہم سے تمام انٹرایکٹو سوالات پوچھنے سے بچ سکیں۔
```
mkdir my-project && cd my-project
npm init -y
```
وائٹ انسٹال کریں۔ ہمارے Webpack گائیڈ کے برعکس، یہاں صرف ایک ہی تعمیراتی ٹول کا انحصار ہے۔ ہم --save-devیہ اشارہ کرنے کے لیے استعمال کرتے ہیں کہ یہ انحصار صرف ترقی کے استعمال کے لیے ہے نہ کہ پیداوار کے لیے۔
```
npm i --save-dev vite
```
بوٹسٹریپ انسٹال کریں۔ اب ہم بوٹسٹریپ انسٹال کر سکتے ہیں۔ ہم Popper کو بھی انسٹال کریں گے کیونکہ ہمارے ڈراپ ڈاؤن، پاپ اوور، اور ٹول ٹپس ان کی پوزیشننگ کے لیے اس پر منحصر ہیں۔ اگر آپ ان اجزاء کو استعمال کرنے کا ارادہ نہیں رکھتے ہیں، تو آپ یہاں Popper کو چھوڑ سکتے ہیں۔
```
npm i --save bootstrap @popperjs/core
```
اضافی انحصار انسٹال کریں۔ وائٹ اور بوٹسٹریپ کے علاوہ، ہمیں بوٹسٹریپ کے سی ایس ایس کو صحیح طریقے سے درآمد اور بنڈل کرنے کے لیے ایک اور انحصار (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.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>ہم دیکھیں کہ بوٹسٹریپ کا سی ایس ایس کب وائٹ کے ذریعے لوڈ ہوتا ہے۔
اب ہمیں وائٹ چلانے کے لیے این پی ایم اسکرپٹ کی ضرورت ہے۔ نیچے دکھائی گئی اسکرپٹ کو کھولیں package.jsonاور شامل کریں start(آپ کے پاس پہلے سے ہی ٹیسٹ اسکرپٹ ہونا چاہیے)۔ ہم اس اسکرپٹ کو اپنے مقامی وائٹ دیو سرور کو شروع کرنے کے لیے استعمال کریں گے۔
```
{
  // ...
  "scripts": {
    "start": "vite",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  // ...
}
```
اور آخر میں، ہم Vite شروع کر سکتے ہیں. اپنے ٹرمینل کے فولڈر سے my-project، اس نئے شامل کردہ npm اسکرپٹ کو چلائیں:
```
npm start
```

اس گائیڈ کے اگلے اور آخری حصے میں، ہم بوٹسٹریپ کے تمام CSS اور JavaScript کو درآمد کریں گے۔

بوٹسٹریپ درآمد کریں۔

میں بوٹسٹریپ کی ساس درآمد کو ترتیب 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 لوڈ کرتے ہیں اور بوٹسٹریپ کا جاوا اسکرپٹ درآمد کرتے ہیں۔ src/js/main.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';
```
بوٹسٹریپ کے پلگ انز کو استعمال کرنے کے طریقے کے بارے میں مزید معلومات کے لیے ہماری جاوا اسکرپٹ دستاویزات پڑھیں ۔
اور آپ کا کام ہو گیا! 🎉 بوٹسٹریپ کے سورس Sass اور JS کے مکمل طور پر لوڈ ہونے کے ساتھ، آپ کا لوکل ڈویلپمنٹ سرور اب ایسا نظر آنا چاہیے۔

اب آپ بوٹسٹریپ کے کسی بھی اجزاء کو شامل کرنا شروع کر سکتے ہیں جسے آپ استعمال کرنا چاہتے ہیں۔ اضافی کسٹم ساس کو شامل کرنے اور بوٹسٹریپ کے سی ایس ایس اور جے ایس کے صرف ان حصوں کو درآمد کرکے اپنی تعمیر کو بہتر بنانے کے لیے مکمل وائٹ مثال پروجیکٹ کو ضرور دیکھیں جن کی آپ کو ضرورت ہے۔

یہاں کچھ غلط یا پرانا دیکھتے ہیں؟ براہ کرم GitHub پر ایک مسئلہ کھولیں ۔ ٹربل شوٹنگ میں مدد کی ضرورت ہے؟ GitHub پر تلاش کریں یا بحث شروع کریں ۔