ማስነሻ & Vite

Viteን በመጠቀም የ Bootstrap's CSS እና JavaScriptን በፕሮጀክትዎ ውስጥ እንዴት እንደሚያካትቱ እና እንደሚጠጉ ይፋዊ መመሪያ።

በዚህ ገጽ ላይ

እስከ መጨረሻው መዝለል ይፈልጋሉ? ለዚህ መመሪያ የምንጭ ኮዱን እና የስራ ማሳያን ከ twbs/ምሳሌዎች ማከማቻ ያውርዱ ። ለቀጥታ አርትዖት ምሳሌውን በ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ን መጫን እንችላለን. የእኛ ተቆልቋይ፣ ብቅ-ባይ እና የመሳሪያ ምክሮች በአቀማመጃቸው ላይ ስለሚመሰረቱ ፖፐርን እንጭነዋለን። እነዚህን ክፍሎች ለመጠቀም ካላሰቡ፣ እዚህ ፖፐርን መተው ይችላሉ።
```
npm i --save bootstrap @popperjs/core
```
ተጨማሪ ጥገኛን ጫን። ከ Vite እና Bootstrap በተጨማሪ የBootstrap CSSን በአግባቡ ለማስመጣት እና ለመጠቅለል ሌላ ጥገኝነት እንፈልጋለን።
```
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 አይሰራም ምክንያቱም እኛ vite.config.jsእስካሁን ድረስ አልሞላንም.

Vite አዋቅር

ጥገኞች ከተጫኑ እና የፕሮጀክታችን ማህደር ኮድ መስራት እንድንጀምር ተዘጋጅቶልናል፣ አሁን Vite ን አዋቅረን ፕሮጀክታችንን በአገር ውስጥ ማስኬድ እንችላለን።

በአርታዒዎ ውስጥ ይክፈቱ vite.config.js። ባዶ ስለሆነ አገልጋያችንን ለመጀመር አንዳንድ የቦይለርፕሌት ውቅሮችን ማከል አለብን። ይህ የውቅረት ክፍል Vite የፕሮጀክታችንን ጃቫስክሪፕት እንዲፈልግ እና የልማቱ አገልጋይ እንዴት መሆን እንዳለበት ይነግረናል (ከአቃፊው srcትኩስ በሆነ ዳግም መጫን)።
```
const path = require('path')

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

በመቀጠል እንሞላለን src/index.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's CSS በ Vite ሲጫን ለማየት እዚህ ጋር ትንሽ የBootstrap div class="container"ስታይል እናካተትበታለን።<button>

አሁን Vite ን ለማሄድ የ npm ስክሪፕት እንፈልጋለን። ከዚህ በታች የሚታየውን ስክሪፕት ይክፈቱ package.jsonእና ያክሉ start(የሙከራ ስክሪፕቱ ቀድሞውኑ ሊኖርዎት ይገባል)። የአካባቢያችንን Vite dev አገልጋይ ለመጀመር ይህን ስክሪፕት እንጠቀማለን።
```
{
  // ...
  "scripts": {
    "start": "vite",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  // ...
}
```
እና በመጨረሻም, Vite ን መጀመር እንችላለን. በእርስዎ ተርሚናል ውስጥ ካለው my-projectአቃፊ፣ ያንን አዲስ የተጨመረው npm ስክሪፕት ያሂዱ፡-
```
npm start
```

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

ማስነሻ አስመጣ

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

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