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

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

په دې پاڼه کې

غواړئ چې پای ته ورسیږئ؟ د دې لارښود لپاره د سرچینې کوډ او کاري ډیمو ډاونلوډ کړئ د 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
```
بوټسټریپ نصب کړئ. اوس موږ کولی شو بوټسټریپ نصب کړو. موږ به پوپر هم نصب کړو ځکه چې زموږ ډراپ ډاونونه، پاپورونه، او اوزار ټیپونه د دوی موقعیت لپاره پدې پورې اړه لري. که تاسو د دې اجزاوو کارولو پلان نه لرئ، تاسو کولی شئ دلته پوپر پریږدئ.
```
npm i --save bootstrap @popperjs/core
```

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

د پروژې جوړښت

موږ لا دمخه my-projectفولډر جوړ کړی او npm یې پیل کړی دی. اوس به موږ خپل 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>له همدې امله موږ وګورو کله چې د بوټسټریپ CSS د ویبپیک لخوا پورته کیږي.

پارسل به په اوتومات ډول معلومه کړي چې موږ 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 او جاواسکریپټ وارد کړو.

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

په پارسل کې د بوټسټریپ واردول دوه وارداتو ته اړتیا لري، یو زموږ styles.scssاو بل زموږ main.jsکې.

د بوټسټریپ سی ایس ایس وارد کړئ. src/scss/styles.scssد بوټسټریپ ټولې سرچینې ساس واردولو لپاره لاندې اضافه کړئ .
```
// 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'
```
د بوټسټریپ پلگ انونو کارولو څرنګوالي په اړه د نورو معلوماتو لپاره زموږ جاواسکریپټ سندونه ولولئ .
او تاسو بشپړ شوي! 🎉 د بوټسټریپ سرچینې ساس او JS په بشپړ ډول بار شوي سره ، ستاسو سیمه ایز پرمختیایی سرور باید اوس داسې ښکاري.

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

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