പാർസൽ
പാർസൽ ഉപയോഗിച്ച് നിങ്ങളുടെ പ്രോജക്റ്റിൽ ബൂട്ട്സ്ട്രാപ്പ് എങ്ങനെ ഉൾപ്പെടുത്താമെന്ന് മനസിലാക്കുക.
പാർസൽ ഇൻസ്റ്റാൾ ചെയ്യുക
പാർസൽ ബണ്ടർ ഇൻസ്റ്റാൾ ചെയ്യുക .
ബൂട്ട്സ്ട്രാപ്പ് ഇൻസ്റ്റാൾ ചെയ്യുക
npm ഉപയോഗിച്ച് ഒരു Node.js മൊഡ്യൂളായി bootstrap ഇൻസ്റ്റാൾ ചെയ്യുക .
ബൂട്ട്സ്ട്രാപ്പ് പ്രോപ്പർട്ടിയിൽ വ്യക്തമാക്കിയ പോപ്പറിനെ ആശ്രയിച്ചിരിക്കുന്നു . നിങ്ങളുടെ ഉപയോഗത്തിൽ peerDependencies
ഇവ രണ്ടും ചേർക്കുന്നത് നിങ്ങൾ ഉറപ്പാക്കേണ്ടതുണ്ട് എന്നാണ് ഇതിനർത്ഥം .package.json
npm 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
.build
package.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