بووتستراپ و پارسێل

ڕێنمایی فەرمی بۆ چۆنیەتی جێگیرکردن و کۆکردنەوەی CSS و JavaScript ی Bootstrap لە پرۆژەکەتدا بە بەکارهێنانی Parcel.

لەم پەیجەدا

دەتەوێت تا کۆتایی باز بدەیت؟ کۆدی سەرچاوە و دیمۆی کارکردن بۆ ئەم ڕێنماییە لە کۆگای twbs/examples دابەزێنە . هەروەها دەتوانیت نموونەکە لە StackBlitz بکەیتەوە بەڵام جێبەجێی نەکەیت چونکە لە ئێستادا Parcel لەوێ پشتگیری ناکرێت.

دا مه رزاندن

ئێمە پڕۆژەیەکی Parcel بە Bootstrap لە سفرەوە دروست دەکەین، بۆیە هەندێک پێشمەرج و هەنگاوی پێشەوە هەیە پێش ئەوەی بەڕاستی بتوانین دەست پێ بکەین. ئەم ڕێنماییە پێویستی بە دامەزراندنی Node.js هەیە و هەندێک ئاشنا بیت بە تێرمیناڵەکە.

فۆڵدەرێکی پرۆژە دروست بکە و npm دابنێ. ئێمە my-projectفۆڵدەرەکە دروست دەکەین و npm بە -yئارگومێنتەکە سەرەتایی دەکەین بۆ ئەوەی هەموو پرسیارە کارلێککەرەکانمان لێ نەپرسێت.
```
mkdir my-project && cd my-project
npm init -y
```
دانانی پارسێل. بە پێچەوانەی ڕێبەری وێبپاکەکەمانەوە، لێرەدا تەنها یەک ئامرازی دروستکردن وابەستەیی هەیە. پارسێل بە شێوەیەکی ئۆتۆماتیکی گۆڕینی زمان (وەک ساس) دادەمەزرێنێت لەگەڵ دۆزینەوەی. ئێمە بەکاری دەهێنین --save-devبۆ ئاماژەدان بەوەی کە ئەم وابەستەییە تەنها بۆ بەکارهێنانی پەرەپێدانە و بۆ بەرهەمهێنان نییە.
```
npm i --save-dev parcel
```
Bootstrap دابمەزرێنە. ئێستا دەتوانین Bootstrap دابمەزرێنین. هەروەها ئێمە Popper دادەمەزرێنین لەبەرئەوەی درۆپداونەکانمان، پۆپۆڤەرەکان و توولتیپەکانمان پشتی پێدەبەستن بۆ جێگیرکردنیان. ئەگەر پلانت نییە ئەو پێکهاتانە بەکاربهێنیت، دەتوانیت لێرەدا پۆپەر نەهێڵیت.
```
npm i --save bootstrap @popperjs/core
```

ئێستا کە هەموو وابەستەییەکانی پێویستمان دامەزراندووە، دەتوانین دەست بکەین بە دروستکردنی فایلەکانی پڕۆژەکە و هاوردەکردنی Bootstrap.

پێکهاتەی پڕۆژە

پێشتر 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 هەیە بۆ ئەوەی سێرڤەرەکەمان دەست پێبکات.

ڕێکخستنی پارسێل

بە دامەزراندنی وابەستەییەکان و ئامادەبوونی فۆڵدەری پڕۆژەکەمان بۆ ئەوەی دەست بە کۆدکردن بکەین، ئێستا دەتوانین Parcel ڕێکبخەین و پڕۆژەکەمان بە شێوەیەکی ناوخۆیی بەڕێوەببەین. پارسێل خۆی بە دیزاین پێویستی بە هیچ فایلێکی ڕێکخستن نییە، بەڵام ئێمە پێویستمان بە سکریپتی npm و فایلێکی HTML هەیە بۆ دەستپێکردنی سێرڤەرەکەمان.

src/index.htmlفایلەکە پڕ بکەرەوە . پارسێل پێویستی بە لاپەڕەیەک هەیە بۆ ڕەندەرکردن، بۆیە ئێمە index.htmlلاپەڕەکەمان بەکاردەهێنین بۆ ڕێکخستنی هەندێک HTML بنەڕەتی، لەنێویاندا فایلەکانی CSS و جاڤاسکڕێپتەکانمان.
```
<!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>
```
ئێمە لێرەدا کەمێک لە ستایلکردنی Bootstrap لەگەڵ وەکەدا دەخەینە ناوەوە div class="container"بۆ <button>ئەوەی بزانین کەی CSS ی Bootstrap لەلایەن Webpack ەوە باردەکرێت.

پارسێل بە شێوەیەکی ئۆتۆماتیکی دەستنیشان دەکات کە ئێمە ساس بەکاردەهێنین و پێوەکراوەکەی ساس پارسێل دادەمەزرێنێت بۆ پشتگیریکردنی. بەڵام ئەگەر بتەوێت دەتوانیت بە دەستی npm i --save-dev @parcel/transformer-sass.
سکریپتەکانی Parcel npm زیاد بکە. بکەرەوە و ئەم سکریپتەی package.jsonخوارەوە زیاد بکە بۆ ئۆبجێکتی. ئێمە ئەم سکریپتە بەکاردەهێنین بۆ دەستپێکردنی سێرڤەری پەرەپێدانی Parcel و ڕەندەرکردنی ئەو فایلە HTML کە دروستمان کردووە دوای ئەوەی لە دایرێکتۆریەکەدا کۆکراوەتەوە.startscriptsdist
```
{
   // ...
   "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 ی Bootstrap هاوردە دەکەین.

هاوردەکردنی بووتستراپ

هاوردەکردنی Bootstrap بۆ ناو پارسێل پێویستی بە دوو هاوردەکردن هەیە، یەکێکیان بۆ ناو ئێمە styles.scssو یەکێکیان بۆ ناو ئێمە main.js.

هاوردەکردنی CSS ی Bootstrap. ئەمانەی خوارەوە زیاد بکە بۆ src/scss/styles.scssبۆ هاوردەکردنی هەموو سەرچاوەی Bootstrap ی Sass.
```
// Import all of Bootstrap's CSS
@import "~bootstrap/scss/bootstrap";
```
هەروەها دەتوانیت بە تاک بە تاک ستایلشێتەکانمان هاوردە بکەیت ئەگەر بتەوێت. بۆ زانینی وردەکارییەکان دۆکیومێنتەکانی هاوردەکردنی ساسمان بخوێنەرەوە .
هاوردەکردنی JS ی Bootstrap. ئەمانەی خوارەوە زیاد بکە بۆ src/js/main.jsبۆ هاوردەکردنی هەموو JS ی Bootstrap. Popper بە شێوەیەکی ئۆتۆماتیکی لە ڕێگەی Bootstrap هاوردە دەکرێت.
```
// 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، دۆکیومێنتەکانی جاڤاسکڕێپتمان بخوێنەرەوە .
وە تۆ تەواو بوویت! 🎉 بە تەواو بارکردنی سەرچاوەی Bootstrap Sass و JS ، ئێستا پێویستە سێرڤەری گەشەپێدانی ناوخۆییت بەم شێوەیە دەربکەوێت.

ئێستا دەتوانیت دەست بکەیت بە زیادکردنی هەر پێکهاتەیەکی Bootstrap کە بتەوێت بەکاری بهێنیت. دڵنیابە کە سەیری پڕۆژەی نموونەی تەواوەتی Parcel بکە بۆ ئەوەی چۆن Sass ی تایبەتمەندی زیادە لەخۆبگریت و دروستکردنەکەت باشتر بکەیت بە هاوردەکردنی تەنها ئەو بەشانەی CSS و JS ی Bootstrap کە پێویستت پێیانە.

لێرەدا شتێکی هەڵە یان بەسەرچوو دەبینیت؟ تکایە کێشەیەک لە GitHub بکەرەوە . پێویستت بە یارمەتی هەیە بۆ چارەسەرکردنی کێشەکان؟ لە GitHub بگەڕێ یان دەست بە گفتوگۆ بکە .