ቡትስትራፕ እና ጥቅል

ፓርሴልን በመጠቀም የቡትስትራፕን ሲኤስኤስ እና ጃቫስክሪፕት በፕሮጀክትዎ ውስጥ እንዴት እንደሚያካትቱ እና እንደሚታቀፉ ይፋዊ መመሪያ።

በዚህ ገጽ ላይ

እስከ መጨረሻው መዝለል ይፈልጋሉ? ለዚህ መመሪያ የምንጭ ኮዱን እና የስራ ማሳያን ከ twbs/ምሳሌዎች ማከማቻ ያውርዱ ። ምሳሌውን በStackBlitz ውስጥ መክፈት ይችላሉ ነገር ግን ፓርሴል በአሁኑ ጊዜ እዚያ ስለማይደገፍ እሱን ማስኬድ ይችላሉ።

አዘገጃጀት

የፓርሴል ፕሮጀክትን ከባዶ በBootstrap እየገነባን ነው፣ ስለዚህ በትክክል ከመጀመራችን በፊት አንዳንድ ቅድመ ሁኔታዎች እና የፊት ደረጃዎች አሉ። ይህ መመሪያ 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
```

አሁን ሁሉም አስፈላጊ ጥገኛዎች ተጭነዋል, የፕሮጀክት ፋይሎችን በመፍጠር እና 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 ስክሪፕት ያስፈልገዋል.

ፓርሴልን አዋቅር

ጥገኞች ከተጫኑ እና የፕሮጀክታችን ማህደር ኮድ መስራት እንድንጀምር ከተዘጋጀን አሁን ፓርሴልን አዋቅረን ፕሮጀክታችንን በአገር ውስጥ ማካሄድ እንችላለን። ፓርሴል ራሱ በንድፍ የማዋቀር ፋይል አይፈልግም፣ ነገር ግን አገልጋያችንን ለመጀመር npm ስክሪፕት እና HTML ፋይል እንፈልጋለን።

src/index.htmlፋይሉን ይሙሉ . ፓርሴል ለመስራት ገጽ ይፈልጋል፣ ስለዚህ index.htmlየእኛን CSS እና JavaScript ፋይሎችን ጨምሮ አንዳንድ መሰረታዊ HTML ለማዘጋጀት ገጻችንን እንጠቀማለን።
```
<!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's CSS በዌብፓክ ሲጫን ለማየት እዚህ div class="container"ጋር ትንሽ የBootstrap ስታይል እናካተትበታለን።<button>

ፓርሴል Sass እየተጠቀምን መሆናችንን ያውቀዋል እና እሱን ለመደገፍ የ Sass Parcel ፕለጊን ይጭናል ። ሆኖም ፣ ከፈለጉ ፣ እርስዎም እንዲሁ በእጅ መሮጥ ይችላሉ npm i --save-dev @parcel/transformer-sass።
የ Parcel 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
```

ወደዚህ መመሪያ በሚቀጥለው እና በመጨረሻው ክፍል ሁሉንም የ Bootstrap CSS እና JavaScriptን እናስመጣለን።

ማስነሻ አስመጣ

ቡትስትራፕን ወደ ፓርሴል ማስመጣት ሁለት ከውጭ ማስገባትን ይጠይቃል፣ አንድ ወደ እኛ styles.scssእና አንድ ወደ እኛ main.js።

የ Bootstrap CSS አስመጣ። src/scss/styles.scssሁሉንም የ Bootstrap ምንጭ Sass ለማስገባት የሚከተለውን ያክሉ ።
```
// Import all of Bootstrap's CSS
@import "~bootstrap/scss/bootstrap";
```
ከፈለጉ የኛን የቅጥ ሉሆች ለየብቻ ማስመጣት ይችላሉ። ለዝርዝሮች የእኛን የ Sass ማስመጣት ዶክመንቶችን ያንብቡ ።
የ Bootstrap JS አስመጣ። src/js/main.jsሁሉንም የBootstrap JS ለማስገባት የሚከተለውን ያክሉ ። ፖፐር በራስ ሰር በ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 ክፍሎች ማከል ይችላሉ። ተጨማሪ ብጁ Sassን እንዴት እንደሚያካትቱ እና እርስዎ የሚፈልጉትን የ Bootstrap CSS እና JS ክፍሎችን ብቻ በማስመጣት ግንባታዎን እንዴት እንደሚያሻሽሉ የተሟላውን የፓርሴል ምሳሌ ፕሮጀክት ይመልከቱ ።

እዚህ የሆነ የተሳሳተ ወይም ጊዜው ያለፈበት ነገር አየህ? እባክዎ በ GitHub ላይ ችግር ይክፈቱ ። መላ ፍለጋ እገዛ ይፈልጋሉ? በ GitHub ላይ ይፈልጉ ወይም ውይይት ይጀምሩ ።