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

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

اس صفحہ پر

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

سیٹ اپ

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

ایک پروجیکٹ فولڈر بنائیں اور این پی ایم سیٹ اپ کریں۔ ہم my-projectفولڈر بنائیں گے اور npm کو -yدلیل کے ساتھ شروع کریں گے تاکہ ہم سے تمام انٹرایکٹو سوالات پوچھنے سے بچ سکیں۔
```
mkdir my-project && cd my-project
npm init -y
```
پارسل انسٹال کریں۔ ہمارے Webpack گائیڈ کے برعکس، یہاں صرف ایک ہی تعمیراتی ٹول کا انحصار ہے۔ پارسل خود بخود لینگویج ٹرانسفارمرز (جیسے ساس) انسٹال کر دے گا کیونکہ یہ ان کا پتہ لگاتا ہے۔ ہم --save-devیہ اشارہ کرنے کے لیے استعمال کرتے ہیں کہ یہ انحصار صرف ترقی کے استعمال کے لیے ہے نہ کہ پیداوار کے لیے۔
```
npm i --save-dev parcel
```
بوٹسٹریپ انسٹال کریں۔ اب ہم بوٹسٹریپ انسٹال کر سکتے ہیں۔ ہم Popper کو بھی انسٹال کریں گے کیونکہ ہمارے ڈراپ ڈاؤن، پاپ اوور، اور ٹول ٹپس ان کی پوزیشننگ کے لیے اس پر منحصر ہیں۔ اگر آپ ان اجزاء کو استعمال کرنے کا ارادہ نہیں رکھتے ہیں، تو آپ یہاں Popper کو چھوڑ سکتے ہیں۔
```
npm i --save bootstrap @popperjs/core
```

اب جب کہ ہمارے پاس تمام ضروری انحصار انسٹال ہیں، ہم پروجیکٹ فائلوں کو بنانے اور بوٹسٹریپ کو درآمد کرنے کا کام کر سکتے ہیں۔

پروجیکٹ کا ڈھانچہ

ہم پہلے ہی my-projectفولڈر بنا چکے ہیں اور این پی ایم کو شروع کر چکے ہیں۔ اب ہم اپنا srcفولڈر، اسٹائل شیٹ، اور جاوا اسکرپٹ فائل بھی بنائیں گے تاکہ پروجیکٹ کے ڈھانچے کو راؤنڈ آؤٹ کیا جاسکے۔ سے درج ذیل کو چلائیں my-project، یا نیچے دکھایا گیا فولڈر اور فائل کا ڈھانچہ دستی طور پر بنائیں۔

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

جب آپ کام کر لیں تو آپ کا مکمل پروجیکٹ اس طرح نظر آنا چاہیے:

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

اس وقت، سب کچھ صحیح جگہ پر ہے، لیکن پارسل کو ہمارا سرور شروع کرنے کے لیے ایک HTML صفحہ اور npm اسکرپٹ کی ضرورت ہے۔

پارسل کو ترتیب دیں۔

انحصار انسٹال ہونے اور ہمارے پروجیکٹ فولڈر کو کوڈنگ شروع کرنے کے لیے تیار ہونے کے ساتھ، اب ہم پارسل کو کنفیگر کر سکتے ہیں اور اپنے پروجیکٹ کو مقامی طور پر چلا سکتے ہیں۔ خود پارسل کو ڈیزائن کے لحاظ سے کسی کنفیگریشن فائل کی ضرورت نہیں ہے، لیکن ہمیں اپنے سرور کو شروع کرنے کے لیے ایک npm اسکرپٹ اور ایک HTML فائل کی ضرورت ہے۔

src/index.htmlفائل میں بھریں . پارسل کو رینڈر کرنے کے لیے ایک صفحہ کی ضرورت ہے، لہذا ہم اپنے index.htmlصفحہ کو کچھ بنیادی HTML ترتیب دینے کے لیے استعمال کرتے ہیں، بشمول ہماری CSS اور JavaScript فائلیں۔
```
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap w/ Parcel</title>
    <link rel="stylesheet" href="scss/styles.scss">
    <script type="module" src="js/main.js"></script>
  </head>
  <body>
    <div class="container py-4 px-3 mx-auto">
      <h1>Hello, Bootstrap and Parcel!</h1>
      <button class="btn btn-primary">Primary button</button>
    </div>
  </body>
</html>
```
ہم یہاں کے ساتھ بوٹسٹریپ اسٹائل کا تھوڑا سا حصہ شامل کر رہے ہیں div class="container"تاکہ <button>ہم دیکھیں کہ بوٹسٹریپ کا سی ایس ایس کب ویب پیک کے ذریعے لوڈ ہوتا ہے۔

پارسل خود بخود پتہ لگائے گا کہ ہم Sass استعمال کر رہے ہیں اور اسے سپورٹ کرنے کے لیے Sass پارسل پلگ ان انسٹال کریں۔ تاہم، اگر آپ چاہیں تو، آپ دستی طور پر بھی چلا سکتے ہیں npm i --save-dev @parcel/transformer-sass۔
پارسل این پی ایم اسکرپٹس شامل کریں۔ کھولیں package.jsonاور مندرجہ ذیل startاسکرپٹ کو scriptsآبجیکٹ میں شامل کریں۔ ہم اس اسکرپٹ کو اپنے پارسل ڈویلپمنٹ سرور کو شروع کرنے کے لیے استعمال کریں گے اور HTML فائل کو رینڈر کریں گے جسے ہم نے distڈائرکٹری میں مرتب کرنے کے بعد بنایا ہے۔
```
{
   // ...
   "scripts": {
     "start": "parcel serve src/index.html --public-url / --dist-dir dist",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   // ...
}
```
اور آخر کار، ہم پارسل شروع کر سکتے ہیں۔ اپنے ٹرمینل کے فولڈر سے my-project، اس نئے شامل کردہ npm اسکرپٹ کو چلائیں:
```
npm start
```

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

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

بوٹسٹریپ کو پارسل میں درآمد کرنے کے لیے دو درآمدات کی ضرورت ہوتی ہے، ایک ہمارے میں styles.scssاور ایک ہمارے میں main.js۔

بوٹسٹریپ کا سی ایس ایس درآمد کریں۔ src/scss/styles.scssبوٹسٹریپ کے تمام سورس ساس کو درآمد کرنے کے لیے درج ذیل کو شامل کریں ۔
```
// Import all of Bootstrap's CSS
@import "~bootstrap/scss/bootstrap";
```
اگر آپ چاہیں تو انفرادی طور پر ہماری اسٹائل شیٹس بھی درآمد کر سکتے ہیں۔ تفصیلات کے لیے ہماری Sass درآمدی دستاویزات پڑھیں ۔
بوٹسٹریپ کا جے ایس درآمد کریں۔ src/js/main.jsبوٹسٹریپ کے تمام جے ایس کو درآمد کرنے کے لیے درج ذیل کو شامل کریں ۔ پوپر بوٹسٹریپ کے ذریعے خود بخود درآمد ہو جائے گا۔
```
// 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 پر تلاش کریں یا بحث شروع کریں ۔