ቡትስትራፕ ኤንድ ቫይተ

ወግዓዊ መምርሒ ከመይ ጌርካ ናይ Bootstrap CSSን JavaScriptን ኣብ ፕሮጀክትካ Vite ተጠቂምካ ከም እተእትዎን ከም እትጥርንፎን።

ኣብዚ ገጽ

ክሳብ መወዳእታ ክትዘልል ትደሊ? ናይዚ መምርሒ ምንጪ ኮድን ናይ ስራሕ ዲሞን ካብ twbs/examples repository ኣውርድዎ ። ብተወሳኺ ኣብ StackBlitz ንቐጥታዊ ኣርትዖት ኣብነት ክትከፍቶ ትኽእል ኢኻ ።

ምድላው

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

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

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

ኣቃውማ ፕሮጀክት

ድሮ ነቲ ፎልደር ፈጢርና my-projectnpm ኣበጊስናዮ ኣለና። 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.config.jsኣብ ኣርታዒኻ ክፈት ። ባዶ ስለ ዝኾነ ገለ boilerplate config ክንውስኸሉ ከድልየና እዩ ምእንቲ ሰርቨርና ክንጅምር። እዚ ክፋል ናይቲ config ን Vite ናይ ፕሮጀክትና ጃቫስክሪፕትን እቲ ናይ ምዕባለ ሰርቨር ከመይ ክመላለስ ከም ዘለዎን (ካብቲ srcፎልደር ምስ ውዑይ ዳግመ ምጽዓን ምስሓብ) ክደልዩ ከም ዝነበሩ ይነግሮ።
```
const path = require('path')

export default {
  root: path.resolve(__dirname, 'src'),
  server: {
    port: 8080,
    hot: true
  }
}
```

ቀጺልና ንመልኦ src/index.html። እዚ እቲ Vite ኣብቲ browser ዝጽዕኖ HTML page እዩ ነቲ bundled 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 styling ምስቲ div class="container"and ነካትት ኣለና <button>ምእንቲ ናይ Bootstrap CSS ብ Vite መዓስ ከም ዝጽዓን ክንርኢ።

ሕጂ Vite ንምስራሕ npm ስክሪፕት የድልየና ኣሎ። ነቲ ኣብ ታሕቲ ዘሎ ስክሪፕት ከፊትካ package.jsonወስኸሉ (ድሮ ናይ ፈተና ስክሪፕት ክህልወካ ኣለዎ)። startነዚ ስክሪፕት ተጠቒምና ናይ ውሽጢ ዓዲ Vite dev serverና ክንጅምር ኢና።
```
{
  // ...
  "scripts": {
    "start": "vite",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  // ...
}
```
ኣብ መወዳእታ ድማ ቪተ ክንጅምር ንኽእል ኢና። ካብቲ my-projectኣብ ተርሚናልካ ዘሎ ፎልደር፡ ነታ ሓዳስ ዝተወሰኸት npm ስክሪፕት ኣካይዳ፤
```
npm start
```

ኣብ ዝቕጽልን ናይ መወዳእታን ክፋል ናይዚ መምርሒ፡ ኩሉ ናይ Bootstrap CSSን JavaScriptን ከነእቱ ኢና።

ቡትስትራፕ ኣእትዉ

ናይ Bootstrap Sass import ኣብ 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
  }
}
```
ሕጂ፡ ናይ Bootstrap CSS ነእቱ። src/scss/styles.scssንኹሉ ናይ Bootstrap ምንጪ Sass ንምእታው ነዚ ዝስዕብ ናብ ወስኸሉ ።
```
// Import all of Bootstrap's CSS
@import "~bootstrap/scss/bootstrap";
```
ከምኡ ውን እንተደሊኹም ቅዲ ጽሑፋትና ብውልቂ ከተእትዉ ትኽእሉ ኢኹም። ንዝርዝር ሓበሬታ ናይ Sass import docs ናታትና ኣንብቡ ።
ቀጺልና CSS ጽዒንና ናይ Bootstrap ጃቫስክሪፕት ነእቱ። src/js/main.jsCSS ንምጽዓንን ኩሉ ናይ Bootstrap JS ንምእታውን ነዞም ዝስዕቡ ናብ ወስኹሉ ። ፖፐር ብኣውቶማቲክ ብመንገዲ ቡትስትራፕ ክኣቱ እዩ።
```
// 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 components ምውሳኽ ክትጅምር ትኽእል ኢኻ። ተወሳኺ ብሕታዊ Sass ከመይ ጌርካ ከም እተእትዎን ዘድልየካ ክፋላት ናይ Bootstrap CSSን JSን ጥራይ ብምእታው ንህንጸትካ ከተመሓይሾ ከም እትኽእልን ምሉእ ናይ Vite ኣብነት ፕሮጀክት ምፍታሽ ርግጸኛ ኩን ።

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