بووتستراپ و ڤایت

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

لەم پەیجەدا

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

دا مه رزاندن

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

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

ئێستا کە هەموو وابەستەییەکانی پێویستمان دامەزراندووە و ڕێکخستنمان کردووە، دەتوانین دەست بکەین بە کارکردن لە دروستکردنی فایلەکانی پڕۆژەکە و هاوردەکردنی 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 vite.config.js

کاتێک تەواو بوویت، پڕۆژە تەواوەکەت دەبێت بەم شێوەیە دەربکەوێت:

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

لەم خاڵەدا هەموو شتێک لە شوێنی گونجاودایە، بەڵام ڤیت کار ناکات چونکە هێشتا ئێمە پڕ vite.config.jsنەکردووەتەوە.

ڕێکخستنی Vite

بە دامەزراندنی وابەستەییەکان و ئامادەبوونی فۆڵدەری پڕۆژەکەمان بۆ ئەوەی دەست بە کۆدکردن بکەین، ئێستا دەتوانین Vite ڕێکبخەین و پڕۆژەکەمان بە شێوەیەکی ناوخۆیی بەڕێوەببەین.

vite.config.jsلە دەستکاریکەرەکەتدا بکەرەوە . بەو پێیەی بەتاڵە، پێویستە هەندێک ڕێکخستنی boilerplate زیاد بکەین بۆ ئەوەی بتوانین سێرڤەرەکەمان دەستپێبکەین. ئەم بەشەی ڕێکخستنەکە بە Vite دەڵێت کە بوون بەدوای جاڤاسکڕێپتی پڕۆژەکەماندا بگەڕێن و چۆن سێرڤەری پەرەپێدان دەبێت هەڵسوکەوت بکات (کێشان لە 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>
```
ئێمە لێرەدا کەمێک لە ستایلکردنی Bootstrap لەگەڵ وەکەدا دەخەینە ناوەوە div class="container"بۆ <button>ئەوەی بزانین کەی CSS ی Bootstrap لەلایەن Vite ەوە باردەکرێت.
ئێستا پێویستمان بە سکریپتی npm هەیە بۆ ئەوەی Vite جێبەجێ بکەین. ئەو سکریپتە بکەرەوە package.jsonو زیاد بکە کە لە startخوارەوە نیشان دراوە (پێویستە پێشتر سکریپتی تاقیکردنەوەکەت هەبێت). ئێمە ئەم سکریپتە بەکاردەهێنین بۆ دەستپێکردنی سێرڤەری ناوخۆیی Vite dev ـمان.
```
{
  // ...
  "scripts": {
    "start": "vite",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  // ...
}
```
و لە کۆتاییدا، دەتوانین دەست بە ڤایت بکەین. لە my-projectفۆڵدەری ناو تێرمیناڵەکەتەوە ئەو سکریپتە تازە زیادکراوەی npm جێبەجێ بکە:
```
npm start
```

لە بەشی داهاتوو و کۆتایی ئەم ڕێنماییەدا، هەموو CSS و JavaScript ی Bootstrap هاوردە دەکەین.

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

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

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

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