ബൂട്ട്‌സ്‌ട്രാപ്പും പാർസലും

പാഴ്സൽ ഉപയോഗിച്ച് നിങ്ങളുടെ പ്രോജക്റ്റിൽ ബൂട്ട്സ്ട്രാപ്പിന്റെ CSS-ഉം JavaScript-ഉം എങ്ങനെ ഉൾപ്പെടുത്താമെന്നും ബണ്ടിൽ ചെയ്യാമെന്നും ഉള്ള ഔദ്യോഗിക ഗൈഡ്.

ഈ പേജിൽ

അവസാനം വരെ പോകണോ? ഈ ഗൈഡിനായി സോഴ്‌സ് കോഡും വർക്കിംഗ് ഡെമോയും twbs/examples repository- ൽ നിന്ന് ഡൗൺലോഡ് ചെയ്യുക . നിങ്ങൾക്ക് StackBlitz-ലും ഉദാഹരണം തുറക്കാൻ കഴിയും, പക്ഷേ പാർസൽ നിലവിൽ അവിടെ പിന്തുണയ്‌ക്കാത്തതിനാൽ അത് പ്രവർത്തിപ്പിക്കാനാകില്ല.

സജ്ജമാക്കുക

ഞങ്ങൾ ആദ്യം മുതൽ ബൂട്ട്‌സ്‌ട്രാപ്പ് ഉപയോഗിച്ച് ഒരു പാഴ്‌സൽ പ്രോജക്റ്റ് നിർമ്മിക്കുകയാണ്, അതിനാൽ ഞങ്ങൾക്ക് ശരിക്കും ആരംഭിക്കുന്നതിന് മുമ്പ് ചില മുൻവ്യവസ്ഥകളും മുൻ ഘട്ടങ്ങളും ഉണ്ട്. ഈ ഗൈഡിന് നിങ്ങൾ Node.js ഇൻസ്റ്റാൾ ചെയ്യുകയും ടെർമിനലുമായി കുറച്ച് പരിചയം ഉണ്ടായിരിക്കുകയും വേണം.

ഒരു പ്രോജക്റ്റ് ഫോൾഡർ സൃഷ്ടിച്ച് npm സജ്ജീകരിക്കുക. എല്ലാ സംവേദനാത്മക ചോദ്യങ്ങളും ഞങ്ങളോട് ചോദിക്കുന്നത് ഒഴിവാക്കാൻ ഞങ്ങൾ my-projectഫോൾഡർ സൃഷ്‌ടിക്കുകയും ആർഗ്യുമെന്റ് ഉപയോഗിച്ച് npm ആരംഭിക്കുകയും ചെയ്യും.-y
```
mkdir my-project && cd my-project
npm init -y
```
പാർസൽ ഇൻസ്റ്റാൾ ചെയ്യുക. ഞങ്ങളുടെ വെബ്‌പാക്ക് ഗൈഡിൽ നിന്ന് വ്യത്യസ്തമായി, ഇവിടെ ഒരൊറ്റ ബിൽഡ് ടൂൾ ഡിപൻഡൻസി മാത്രമേയുള്ളൂ. പാഴ്സൽ ഭാഷാ ട്രാൻസ്ഫോർമറുകൾ (സാസ് പോലുള്ളവ) കണ്ടെത്തുന്നതിനനുസരിച്ച് സ്വയമേവ ഇൻസ്റ്റാൾ ചെയ്യും. --save-devഈ ആശ്രിതത്വം വികസനത്തിന് മാത്രമുള്ളതാണെന്നും ഉൽപ്പാദനത്തിനുള്ളതല്ലെന്നും ഞങ്ങൾ സൂചിപ്പിക്കാൻ ഉപയോഗിക്കുന്നു .
```
npm i --save-dev parcel
```
ബൂട്ട്സ്ട്രാപ്പ് ഇൻസ്റ്റാൾ ചെയ്യുക. ഇപ്പോൾ നമുക്ക് ബൂട്ട്സ്ട്രാപ്പ് ഇൻസ്റ്റാൾ ചെയ്യാം. ഞങ്ങളുടെ ഡ്രോപ്പ്‌ഡൗണുകളും പോപോവറുകളും ടൂൾടിപ്പുകളും അവയുടെ സ്ഥാനനിർണ്ണയത്തിനായി അതിനെ ആശ്രയിച്ചിരിക്കുന്നതിനാൽ ഞങ്ങൾ പോപ്പറും ഇൻസ്റ്റാൾ ചെയ്യും. ആ ഘടകങ്ങൾ ഉപയോഗിക്കാൻ നിങ്ങൾ ഉദ്ദേശിക്കുന്നില്ലെങ്കിൽ, നിങ്ങൾക്ക് പോപ്പർ ഇവിടെ ഒഴിവാക്കാം.
```
npm i --save bootstrap @popperjs/core
```

ഇപ്പോൾ ആവശ്യമായ എല്ലാ ഡിപൻഡൻസികളും ഇൻസ്റ്റാൾ ചെയ്തിട്ടുണ്ട്, പ്രോജക്റ്റ് ഫയലുകൾ സൃഷ്ടിക്കുന്നതിനും ബൂട്ട്സ്ട്രാപ്പ് ഇറക്കുമതി ചെയ്യുന്നതിനും നമുക്ക് പ്രവർത്തിക്കാം.

പദ്ധതിയുടെ ഘടന

ഞങ്ങൾ ഇതിനകം തന്നെ my-projectഫോൾഡർ സൃഷ്‌ടിക്കുകയും npm ആരംഭിക്കുകയും ചെയ്‌തു. പ്രോജക്റ്റ് ഘടനയെ റൗണ്ട് ഔട്ട് ചെയ്യുന്നതിനായി ഞങ്ങൾ ഇപ്പോൾ ഞങ്ങളുടെ srcഫോൾഡർ, സ്റ്റൈൽഷീറ്റ്, JavaScript ഫയൽ എന്നിവയും സൃഷ്ടിക്കും. എന്നതിൽ നിന്ന് ഇനിപ്പറയുന്നവ പ്രവർത്തിപ്പിക്കുക 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 മുഖേന ബൂട്ട്‌സ്‌ട്രാപ്പിന്റെ CSS ലോഡുചെയ്യുമ്പോൾ ഞങ്ങൾ കാണുന്നതിനായി ഞങ്ങൾ div class="container"ഇവിടെ കുറച്ച് ബൂട്ട്‌സ്‌ട്രാപ്പ് സ്‌റ്റൈലിംഗ് ഉൾപ്പെടുത്തുന്നു.<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
```

ഈ ഗൈഡിന്റെ അടുത്തതും അവസാനവുമായ വിഭാഗത്തിൽ, ബൂട്ട്‌സ്‌ട്രാപ്പിന്റെ എല്ലാ CSS ഉം JavaScript ഉം ഞങ്ങൾ ഇറക്കുമതി ചെയ്യും.

ബൂട്ട്സ്ട്രാപ്പ് ഇറക്കുമതി ചെയ്യുക

ബൂട്ട്‌സ്‌ട്രാപ്പ് പാർസലിലേക്ക് ഇമ്പോർട്ടുചെയ്യുന്നതിന് രണ്ട് ഇറക്കുമതികൾ ആവശ്യമാണ്, ഒന്ന് ഞങ്ങളിലേക്കും styles.scssഒന്ന് ഞങ്ങളുടെ main.js.

ബൂട്ട്‌സ്‌ട്രാപ്പിന്റെ CSS ഇറക്കുമതി ചെയ്യുക. src/scss/styles.scssബൂട്ട്‌സ്‌ട്രാപ്പിന്റെ എല്ലാ സോഴ്‌സ് സാസും ഇറക്കുമതി ചെയ്യാൻ ഇനിപ്പറയുന്നവ ചേർക്കുക .
```
// Import all of Bootstrap's CSS
@import "~bootstrap/scss/bootstrap";
```
നിങ്ങൾക്ക് വേണമെങ്കിൽ ഞങ്ങളുടെ സ്റ്റൈൽഷീറ്റുകൾ വ്യക്തിഗതമായി ഇറക്കുമതി ചെയ്യാനും കഴിയും. വിശദാംശങ്ങൾക്ക് ഞങ്ങളുടെ Sass ഇറക്കുമതി ഡോക്‌സ് വായിക്കുക .
ബൂട്ട്‌സ്‌ട്രാപ്പിന്റെ JS ഇറക്കുമതി ചെയ്യുക. src/js/main.jsബൂട്ട്‌സ്‌ട്രാപ്പിന്റെ എല്ലാ JS-ഉം ഇറക്കുമതി ചെയ്യാൻ ഇനിപ്പറയുന്നവ ചേർക്കുക . ബൂട്ട്‌സ്‌ട്രാപ്പ് വഴി പോപ്പർ സ്വയമേവ ഇറക്കുമതി ചെയ്യപ്പെടും.
```
// 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'
```
ബൂട്ട്‌സ്‌ട്രാപ്പിന്റെ പ്ലഗിനുകൾ എങ്ങനെ ഉപയോഗിക്കാമെന്നതിനെക്കുറിച്ചുള്ള കൂടുതൽ വിവരങ്ങൾക്ക് ഞങ്ങളുടെ JavaScript ഡോക്‌സ് വായിക്കുക .
നിങ്ങൾ പൂർത്തിയാക്കി! 🎉 ബൂട്ട്‌സ്‌ട്രാപ്പിന്റെ ഉറവിടം Sass ഉം JS ഉം പൂർണ്ണമായി ലോഡുചെയ്‌തിരിക്കുന്നതിനാൽ, നിങ്ങളുടെ പ്രാദേശിക വികസന സെർവർ ഇപ്പോൾ ഇതുപോലെയായിരിക്കണം.

ഇപ്പോൾ നിങ്ങൾ ഉപയോഗിക്കാൻ ആഗ്രഹിക്കുന്ന ഏതെങ്കിലും ബൂട്ട്‌സ്‌ട്രാപ്പ് ഘടകങ്ങൾ ചേർക്കാൻ തുടങ്ങാം. നിങ്ങൾക്ക് ആവശ്യമായ ബൂട്ട്‌സ്‌ട്രാപ്പിന്റെ CSS-ന്റെയും JS-ന്റെയും ഭാഗങ്ങൾ മാത്രം ഇറക്കുമതി ചെയ്‌ത് കൂടുതൽ ഇഷ്‌ടാനുസൃത സാസ് എങ്ങനെ ഉൾപ്പെടുത്താമെന്നും നിങ്ങളുടെ ബിൽഡ് ഒപ്റ്റിമൈസ് ചെയ്യാമെന്നും പൂർണ്ണമായ പാർസൽ ഉദാഹരണ പ്രോജക്റ്റ് പരിശോധിക്കുന്നത് ഉറപ്പാക്കുക .

ഇവിടെ എന്തെങ്കിലും തെറ്റോ കാലഹരണപ്പെട്ടതോ കണ്ടോ? ദയവായി GitHub-ൽ ഒരു പ്രശ്നം തുറക്കുക . പ്രശ്‌നപരിഹാരത്തിന് സഹായം ആവശ്യമുണ്ടോ? GitHub-ൽ തിരയുക അല്ലെങ്കിൽ ചർച്ച ആരംഭിക്കുക .