Bootstrap & Vite

Vite භාවිතයෙන් Bootstrap හි CSS සහ JavaScript ඔබේ ව්‍යාපෘතියට ඇතුළත් කරන්නේ කෙසේද යන්න පිළිබඳ නිල මාර්ගෝපදේශය.

මෙම පිටුවේ

අවසානය දක්වා පැන යාමට අවශ්‍යද? twbs/උදාහරණ ගබඩාවෙන් මෙම මාර්ගෝපදේශය සඳහා මූලාශ්‍ර කේතය සහ ක්‍රියාකාරී ආදර්ශනය බාගන්න . ඔබට සජීවී සංස්කරණය සඳහා StackBlitz හි උදාහරණය විවෘත කළ හැක.

සැලසුම

අපි මුල සිටම Bootstrap සමඟ Vite ව්‍යාපෘතියක් ගොඩනඟමින් සිටිමු, එබැවින් අපට සැබවින්ම ආරම්භ කිරීමට පෙර යම් පූර්වාවශ්‍යතා සහ ඉදිරි පියවර තිබේ. මෙම මාර්ගෝපදේශය ඔබට Node.js ස්ථාපනය කර තිබීම සහ ටර්මිනලය සමඟ යම් හුරුපුරුදුකමක් අවශ්‍ය වේ.

ව්‍යාපෘති ෆෝල්ඩරයක් සාදා npm සකසන්න. අපි ෆෝල්ඩරය සාදා එය අපෙන් සියලු අන්තර්ක්‍රියාකාරී ප්‍රශ්න ඇසීම වැළැක්වීම my-projectසඳහා තර්කය සමඟ npm ආරම්භ කරන්නෙමු.-y
```
mkdir my-project && cd my-project
npm init -y
```
Vite ස්ථාපනය කරන්න. අපගේ Webpack මාර්ගෝපදේශය මෙන් නොව, මෙහි ඇත්තේ තනි ගොඩනැගීමේ මෙවලම් පරායත්තතාවයක් පමණි. --save-devමෙම යැපීම සංවර්ධනය සඳහා පමණක් වන අතර නිෂ්පාදනය සඳහා නොවන බව අපි සංඥා කිරීමට භාවිතා කරමු .
```
npm i --save-dev vite
```
Bootstrap ස්ථාපනය කරන්න. දැන් අපිට Bootstrap ස්ථාපනය කරන්න පුළුවන්. අපගේ dropdowns, popovers, සහ මෙවලම් ඉඟි ඒවායේ ස්ථානගත කිරීම සඳහා රඳා පවතින බැවින් අපි Popper ස්ථාපනය කරන්නෙමු. ඔබ එම සංරචක භාවිතා කිරීමට සැලසුම් නොකරන්නේ නම්, ඔබට මෙහි පොපර් ඉවත් කළ හැක.
```
npm i --save bootstrap @popperjs/core
```
අතිරේක යැපීම ස්ථාපනය කරන්න. Vite සහ Bootstrap වලට අමතරව, Bootstrap හි CSS නිසි ලෙස ආනයනය කිරීමට සහ බණ්ඩල් කිරීමට අපට තවත් පරායත්තතාවයක් (Sass) අවශ්‍ය වේ.
```
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 වින්‍යාස කර අපගේ ව්‍යාපෘතිය දේශීයව ක්‍රියාත්මක කළ හැක.

vite.config.jsඔබේ සංස්කාරකයේ විවෘත කරන්න. එය හිස් බැවින්, අපට අපගේ සේවාදායකය ආරම්භ කිරීමට හැකි වන පරිදි එයට බොයිලේරු තහඩු වින්‍යාස කිහිපයක් එක් කිරීමට අවශ්‍ය වනු ඇත. වින්‍යාසයේ මෙම කොටස Vite පවසන්නේ අපගේ ව්‍යාපෘතියේ ජාවාස්ක්‍රිප්ට් සහ සංවර්ධන සේවාදායකය හැසිරිය යුතු ආකාරය ( srcඋණුසුම් රීලෝඩ් සමඟින් ෆෝල්ඩරයෙන් අදින්න) සොයා බැලිය යුතු බවයි.
```
const path = require('path')

export default {
  root: path.resolve(__dirname, 'src'),
  server: {
    port: 8080,
    hot: true
  }
}
```
ඊළඟට අපි පුරවන්නෙමු src/index.html. මෙය Bundled CSS සහ JS භාවිතා කිරීමට Vite බ්‍රවුසරයේ පූරණය වන HTML පිටුවයි.
```
<!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>එමඟින් Bootstrap හි CSS Vite විසින් පූරණය වන විට අපට දැකගත හැකිය.
දැන් අපට 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 ආනයනය කරන්න

තුළ 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 හි CSS ආයාත කරමු. src/scss/styles.scssBootstrap හි සියලු මූලාශ්‍ර Sass ආයාත කිරීමට පහත ඒවා එකතු කරන්න .
```
// Import all of Bootstrap's CSS
@import "~bootstrap/scss/bootstrap";
```
ඔබට අවශ්‍ය නම් අපගේ මෝස්තර පත්‍ර ඔබට තනි තනිව ආනයනය කළ හැක. විස්තර සඳහා අපගේ Sass ආනයන ලේඛන කියවන්න .
ඊළඟට අපි CSS පූරණය කර Bootstrap හි JavaScript ආයාත කරමු. src/js/main.jsCSS පූරණය කිරීමට සහ Bootstrap හි සියලුම JS ආයාත කිරීමට පහත ඒවා එකතු කරන්න . Bootstrap හරහා Poper ස්වයංක්‍රීයව ආනයනය කරනු ලැබේ.
```
// Import our custom CSS
import '../scss/styles.scss'

// Import all of Bootstrap's JS
import * as bootstrap from 'bootstrap'
```
බණ්ඩල් ප්‍රමාණය අඩු කර ගැනීමට අවශ්‍ය පරිදි ඔබට JavaScript ප්ලගීන තනි තනිව ආයාත කළ හැක:
```
import Alert from 'bootstrap/js/dist/alert';

// or, specify which plugins you need:
import { Tooltip, Toast, Popover } from 'bootstrap';
```
Bootstrap හි ප්ලගීන භාවිතා කරන්නේ කෙසේද යන්න පිළිබඳ වැඩිදුර තොරතුරු සඳහා අපගේ JavaScript docs කියවන්න .
සහ ඔබ අවසන්! 🎉 Bootstrap හි මූලාශ්‍රය Sass සහ JS සම්පුර්ණයෙන්ම පූරණය කර ඇති විට, ඔබගේ ප්‍රාදේශීය සංවර්ධන සේවාදායකය දැන් මේ ආකාරයෙන් දිස්විය යුතුය.

දැන් ඔබට භාවිතා කිරීමට අවශ්‍ය ඕනෑම Bootstrap සංරචක එකතු කිරීම ආරම්භ කළ හැක. ඔබට අවශ්‍ය Bootstrap හි CSS සහ JS කොටස් පමණක් ආයාත කිරීමෙන් අමතර අභිරුචි Sass ඇතුළත් කිරීම සහ ඔබේ ගොඩනැගීම ප්‍රශස්ත කිරීම සඳහා සම්පූර්ණ Vite උදාහරණ ව්‍යාපෘතිය පරීක්ෂා කිරීමට වග බලා ගන්න .

මෙහි යම් වරදක් හෝ යල් පැන ගිය දෙයක් දකින්නේද? කරුණාකර GitHub හි ගැටලුවක් විවෘත කරන්න . දෝශ නිරාකරණයට උදවු අවශ්‍යද? GitHub මත සොයන්න හෝ සාකච්ඡාවක් ආරම්භ කරන්න .