බූට්ස්ට්‍රැප් සහ පාර්සලය

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

මෙම පිටුවේ

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

සැලසුම

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

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

අපි Sass භාවිතා කරන බව පාර්සලය ස්වයංක්‍රීයව හඳුනාගෙන එයට සහය වීමට Sass Parcel ප්ලගිනය ස්ථාපනය කරයි. කෙසේ වෙතත්, ඔබ කැමති නම්, ඔබට අතින් ධාවනය කළ හැකිය npm i --save-dev @parcel/transformer-sass.
පාර්සලය 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 ආයාත කරන්නෙමු.

Bootstrap ආනයනය කරන්න

Bootstrap පාර්සලයට ආයාත කිරීම සඳහා ආනයන දෙකක් අවශ්‍ය වේ, එකක් අපගේ styles.scssසහ එකක් අපගේ main.js.

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

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