ቡትስትራፕ & ፓርሰል

ፓርሰል ተጠቒምካ ኣብ ፕሮጀክትካ ናይ Bootstrap CSSን JavaScriptን ከመይ ጌርካ ከም እተእትዎን ከም እትጥርንፎን ዝሕብር ወግዓዊ መምርሒ።

ኣብዚ ገጽ

ክሳብ መወዳእታ ክትዘልል ትደሊ? ናይዚ መምርሒ ምንጪ ኮድን ናይ ስራሕ ዲሞን ካብ twbs/examples repository ኣውርድዎ ። ነቲ ኣብነት ኣብ StackBlitz ውን ክትከፍቶ ትኽእል ኢኻ ግን ኣብዚ እዋን እዚ Parcel ኣብኡ ስለዘይድገፍ ከይተካይዶ።

ምድላው

ካብ ባዶ ጀሚርና ብቡትስትራፕ ፕሮጀክት ፓርሰል ንሃንጽ ኣለና፡ ስለዚ ቅድሚ ብሓቂ ምጅማርና ገለ ቅድመ ኩነትን ቅድሚት ስጉምትታትን ኣለዉ። እዚ መምርሒ እዚ Node.js ተተኺሉ ገለ ሌላ ምስቲ ተርሚናል ክህልወካ ይጠልብ።

ናይ ፕሮጀክት ፎልደር ምፍጣርን npm ንምድላውን። ንኹሉ መስተጋብራዊ ሕቶታት ከይሓተና ነቲ ፎልደር ፈጢርና my-projectnpm በቲ ሞጎተ ክንጅምሮ ኢና።-y
```
mkdir my-project && cd my-project
npm init -y
```
ፓርሰል ምትካል። ዘይከም መምርሒ ዌብፓክና፡ ኣብዚ ሓደ ናይ ህንጻ መሳርሒ ጽግዕተኛነት ጥራይ ኣሎ። ፓርሰል ትራንስፎርመራት ቋንቋ (ከም ሳስ) እናፈለጠ ምስ ከደ ብኣውቶማቲክ ክተክል እዩ። --save-devእዚ ፅግዕተኛነት ንልምዓታዊ ኣጠቓቕማ ጥራሕ እምበር ንፍርያት ከምዘይኮነ ምልክት ንምሃብ ንጥቀመሉ ።
```
npm i --save-dev parcel
```
ቡትስትራፕ ምትካል። ሕጂ Bootstrap ክንተክል ንኽእል ኢና። ፖፐር እውን ክንተክል ኢና ምኽንያቱ ናትና ድሮፕዳውንስ፣ ፖፖቨርስ፣ ከምኡውን ቱልቲፕስ ንኣቀማምጣኦም ኣብኡ ስለዝምርኮሱ። ነቶም ኣካላት ክትጥቀመሎም እንተዘይሓሲብካ፡ ኣብዚ ፖፐር ክትገድፎ ትኽእል ኢኻ።
```
npm i --save bootstrap @popperjs/core
```

ሕጂ ኩሉ ዘድሊ ጽግዕተኛታት ተተኺሉ ስለዘሎና፡ ናይ ፕሮጀክት ፋይላት ኣብ ምፍጣርን Bootstrap ኣብ ምእታውን ናብ ስራሕ ክንኣቱ ንኽእል።

ኣቃውማ ፕሮጀክት

ድሮ ነቲ ፎልደር ፈጢርና my-projectnpm ኣበጊስናዮ ኣለና። 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>
```
ኣብዚ ቁሩብ ናይ Bootstrap styling ምስቲ div class="container"and ነካትት ኣለና <button>ምእንቲ ናይ Bootstrap CSS ብ Webpack መዓስ ከም ዝጽዓን ክንርኢ።

ፓርሰል ሳስ ንጥቀም ከምዘለና ብኣውቶማቲክ ክፈልጥን ንዕኡ ዝድግፍ ናይ ሳስ ፓርሰል ፕላግ-ኢን ክተክልን እዩ። ይኹን እምበር፡ እንተደሊኻ፡ ብኢድካ እውን ክትሰርሖ ትኽእል ኢኻ 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 import docs ናታትና ኣንብቡ ።
ናይ ቡትስትራፕ ጀይ.ኤስ. src/js/main.jsንኹሉ ናይ Bootstrap 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 ፕላጊናት ንጥቀም ንምርካብ ናይ ጃቫስክሪፕት ዶክስና ኣንብቡ ።
ወዲእካ ድማ! 🎉 ናይ Bootstrap ምንጪ Sassን JSን ምሉእ ብምሉእ ምስ ተጻዕነ፡ ሕጂ ናትካ ናይ ከባቢ ምዕባለ ሰርቨር ከምዚ ክመስል ኣለዎ።

ሕጂ ዝኾነ ክትጥቀመሉ እትደሊ ናይ Bootstrap components ምውሳኽ ክትጅምር ትኽእል ኢኻ። ተወሳኺ ብሕታዊ Sass ከመይ ጌርካ ከም እተእትዎን ዘድልየካ ክፋላት ናይ Bootstrap CSSን JSን ጥራይ ብምእታው ንህንጸትካ ከተመሓይሾ ከም እትኽእልን ምሉእ ኣብነት ፓርሰል ፕሮጀክት ምፍታሽ ርግጸኛ ኩን ።

ኣብዚ ገለ ጌጋ ወይ ግዜኡ ዝሓለፎ ነገር ርኢኹም? በጃኹም ኣብ GitHub ሓደ ጉዳይ ክፈቱ ። ኣብ ምፍታሕ ጸገማት ሓገዝ የድልየካ? ኣብ GitHub ድለ ወይ ዘተ ጀምር ።