പാർസൽ

പാർസൽ ഉപയോഗിച്ച് നിങ്ങളുടെ പ്രോജക്റ്റിൽ ബൂട്ട്സ്ട്രാപ്പ് എങ്ങനെ ഉൾപ്പെടുത്താമെന്ന് മനസിലാക്കുക.

ഈ പേജിൽ

പാർസൽ ഇൻസ്റ്റാൾ ചെയ്യുക

പാർസൽ ബണ്ടർ ഇൻസ്റ്റാൾ ചെയ്യുക .

ബൂട്ട്സ്ട്രാപ്പ് ഇൻസ്റ്റാൾ ചെയ്യുക

npm ഉപയോഗിച്ച് ഒരു Node.js മൊഡ്യൂളായി bootstrap ഇൻസ്റ്റാൾ ചെയ്യുക .

ബൂട്ട്സ്ട്രാപ്പ് പ്രോപ്പർട്ടിയിൽ വ്യക്തമാക്കിയ പോപ്പറിനെ ആശ്രയിച്ചിരിക്കുന്നു . നിങ്ങളുടെ ഉപയോഗത്തിൽ peerDependenciesഇവ രണ്ടും ചേർക്കുന്നത് നിങ്ങൾ ഉറപ്പാക്കേണ്ടതുണ്ട് എന്നാണ് ഇതിനർത്ഥം .package.jsonnpm install @popperjs/core

എല്ലാം പൂർത്തിയാകുമ്പോൾ, നിങ്ങളുടെ പ്രോജക്റ്റ് ഇപ്രകാരമായിരിക്കും:

project-name/
├── build/
├── node_modules/
│   └── bootstrap/
│   └── popper.js/
├── scss/
│   └── custom.scss
├── src/
│   └── index.html
│   └── index.js
└── package.json

JavaScript ഇറക്കുമതി ചെയ്യുന്നു

നിങ്ങളുടെ ആപ്പിന്റെ എൻട്രി പോയിന്റിൽ (സാധാരണയായി ) ബൂട്ട്‌സ്‌ട്രാപ്പിന്റെ JavaScript ഇറക്കുമതി ചെയ്യുക. src/index.jsനിങ്ങൾക്ക് ഞങ്ങളുടെ എല്ലാ പ്ലഗിനുകളും ഒരു ഫയലിലോ അല്ലെങ്കിൽ അവയുടെ ഒരു ഉപവിഭാഗം മാത്രം ആവശ്യമാണെങ്കിൽ വെവ്വേറെയോ ഇറക്കുമതി ചെയ്യാൻ കഴിയും.

// Import all plugins
import * as bootstrap from 'bootstrap';

// Or import only needed plugins
import { Tooltip as Tooltip, Toast as Toast, Popover as Popover } from 'bootstrap';

// Or import just one
import Alert as Alert from '../node_modules/bootstrap/js/dist/alert';

CSS ഇറക്കുമതി ചെയ്യുന്നു

ബൂട്ട്‌സ്‌ട്രാപ്പിന്റെ മുഴുവൻ സാധ്യതകളും പ്രയോജനപ്പെടുത്തുന്നതിനും അത് നിങ്ങളുടെ ആവശ്യങ്ങൾക്കനുസരിച്ച് ഇഷ്‌ടാനുസൃതമാക്കുന്നതിനും, നിങ്ങളുടെ പ്രോജക്റ്റിന്റെ ബണ്ടിംഗ് പ്രക്രിയയുടെ ഭാഗമായി ഉറവിട ഫയലുകൾ ഉപയോഗിക്കുക.

ബൂട്ട്‌സ്‌ട്രാപ്പിന്റെ Sass ഫയലുകൾ ഇറക്കുമതി ചെയ്യാൻscss/custom.scss നിങ്ങളുടേത് സൃഷ്‌ടിക്കുക , തുടർന്ന് ബിൽറ്റ്-ഇൻ ഇഷ്‌ടാനുസൃത വേരിയബിളുകൾ അസാധുവാക്കുക .

ആപ്പ് നിർമ്മിക്കുക

src/index.jsക്ലോസിംഗ് </body>ടാഗിന് മുമ്പ് ഉൾപ്പെടുത്തുക .

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>
  <body>
    <script src="./index.js"></script>
  </body>
</html>

എഡിറ്റ് ചെയ്യുക`package.json`

നിങ്ങളുടെ ഫയലിൽ സ്ക്രിപ്റ്റുകൾ ചേർക്കുക dev.buildpackage.json

"scripts": {
  "dev": "parcel ./src/index.html",
  "prebuild": "npx rimraf build",
  "build": "parcel build --public-url ./ ./src/index.html --experimental-scope-hoisting --out-dir build"
}

dev സ്ക്രിപ്റ്റ് പ്രവർത്തിപ്പിക്കുക

എന്നതിൽ നിങ്ങളുടെ ആപ്പ് ആക്‌സസ് ചെയ്യാനാകും http://127.0.0.1:1234.

npm run dev

ആപ്പ് ഫയലുകൾ നിർമ്മിക്കുക

ബിൽറ്റ് ഫയലുകൾ build/ഫോൾഡറിൽ ഉണ്ട്.

npm run build

പാർസൽ