ബൂട്ട്സ്ട്രാപ്പ് & വൈറ്റ്

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

ഈ പേജിൽ

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

സജ്ജമാക്കുക

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

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

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

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

ഞങ്ങൾ ഇതിനകം തന്നെ 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 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നിങ്ങളുടെ എഡിറ്ററിൽ തുറക്കുക . ഇത് ശൂന്യമായതിനാൽ, അതിൽ കുറച്ച് ബോയിലർ പ്ലേറ്റ് കോൺഫിഗറേഷൻ ചേർക്കേണ്ടതുണ്ട്, അങ്ങനെ ഞങ്ങൾക്ക് ഞങ്ങളുടെ സെർവർ ആരംഭിക്കാനാകും. ഞങ്ങളുടെ പ്രോജക്‌റ്റിന്റെ JavaScript-നും ഡെവലപ്‌മെന്റ് സെർവർ എങ്ങനെ പ്രവർത്തിക്കണമെന്നും ( srcഹോട്ട് റീലോഡ് ഉള്ള ഫോൾഡറിൽ നിന്ന് വലിക്കുന്നത്) നോക്കണമെന്നും കോൺഫിഗറിന്റെ ഈ ഭാഗം Vite പറയുന്നു.
```
const path = require('path')

export default {
  root: path.resolve(__dirname, 'src'),
  server: {
    port: 8080,
    hot: true
  }
}
```
അടുത്തതായി ഞങ്ങൾ പൂരിപ്പിക്കുന്നു src/index.html. ബണ്ടിൽ ചെയ്‌ത 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>
```
ഞങ്ങൾ ഇവിടെ കുറച്ച് ബൂട്ട്‌സ്‌ട്രാപ്പ് സ്‌റ്റൈലിംഗ് ഉൾപ്പെടുത്തുന്നു div class="container", <button>അതിലൂടെ ബൂട്ട്‌സ്‌ട്രാപ്പിന്റെ 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
```

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

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

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

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

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