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

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

هن صفحي تي

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

سيٽ اپ ڪريو

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

پروجيڪٽ فولڊر ٺاهيو ۽ سيٽ اپ ڪريو npm. اسان my-projectفولڊر ٺاهينداسين ۽ npm کي -yدليل سان شروع ڪنداسين ته ان کان بچڻ لاءِ اسان سڀني انٽرايڪٽو سوالن کان پڇڻ.
```
mkdir my-project && cd my-project
npm init -y
```
پارسل انسٽال ڪريو. اسان جي ويب پيڪ گائيڊ جي برعڪس، هتي صرف هڪ تعميراتي اوزار جي انحصار آهي. پارسل خودڪار طريقي سان انسٽال ڪندو ٻولي ٽرانسفارمر (جهڙوڪ Sass) جيئن اهو انهن کي ڳولي ٿو. اسان --save-devاهو اشارو ڏيڻ لاءِ استعمال ڪندا آهيون ته هي انحصار صرف ترقي جي استعمال لاءِ آهي ۽ نه پيداوار لاءِ.
```
npm i --save-dev parcel
```
انسٽال ڪريو Bootstrap. ھاڻي اسان Bootstrap انسٽال ڪري سگھون ٿا. اسان پوپر پڻ انسٽال ڪنداسين ڇو ته اسان جا ڊراپ ڊائونز، پاپ اوور، ۽ ٽول ٽائپس ان تي منحصر آهن انهن جي پوزيشن لاءِ. جيڪڏهن توهان انهن اجزاء کي استعمال ڪرڻ تي منصوبو نه ٿا ڪريو، توهان هتي پوپر کي ختم ڪري سگهو ٿا.
```
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 اسڪرپٽ جي ضرورت آهي.

پارسل ترتيب ڏيو

انحصار سان انسٽال ٿيل ۽ اسان جو پروجيڪٽ فولڊر اسان لاءِ ڪوڊنگ شروع ڪرڻ لاءِ تيار آهي، اسان هاڻي پارسل کي ترتيب ڏئي سگھون ٿا ۽ اسان جي پروجيڪٽ کي مقامي طور تي هلائي سگهون ٿا. پارسل پاڻ کي ڊزائن طرفان ڪا به ترتيب واري فائل جي ضرورت ناهي، پر اسان کي اسان جي سرور کي شروع ڪرڻ لاء هڪ اين پي ايم اسڪرپٽ ۽ هڪ 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.
پارسل npm اسڪرپٽ شامل ڪريو. کوليو 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.

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

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

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