பார்சல்
பார்சலைப் பயன்படுத்தி உங்கள் திட்டத்தில் பூட்ஸ்டார்ப்பை எவ்வாறு சேர்ப்பது என்பதை அறிக.
பார்சலை நிறுவவும்
பார்சல் பண்ட்லரை நிறுவவும் .
பூட்ஸ்டார்ப் நிறுவவும்
npm ஐப் பயன்படுத்தி ஒரு Node.js தொகுதியாக பூட்ஸ்ட்ராப்பை நிறுவவும் .
பூட்ஸ்ட்ராப் பாப்பரைச் சார்ந்தது , இது 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 ஐ இறக்குமதி செய்கிறது
உங்கள் பயன்பாட்டின் நுழைவுப் புள்ளியில் (பொதுவாக ) பூட்ஸ்டார்ப்பின் ஜாவாஸ்கிரிப்டை இறக்குமதி செய்யவும். 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 ஐ இறக்குமதி செய்கிறது
பூட்ஸ்டார்ப்பின் முழுத் திறனையும் பயன்படுத்தி, உங்கள் தேவைக்கேற்ப தனிப்பயனாக்க, உங்கள் திட்டத்தின் தொகுப்பாக்க செயல்முறையின் ஒரு பகுதியாக மூலக் கோப்புகளைப் பயன்படுத்தவும்.
பூட்ஸ்டார்ப்பின் சாஸ் கோப்புகளை இறக்குமதி செய்ய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"
}
டெவ் ஸ்கிரிப்டை இயக்கவும்
உங்கள் பயன்பாட்டை அணுக முடியும் http://127.0.0.1:1234
.
npm run dev
பயன்பாட்டு கோப்புகளை உருவாக்கவும்
உள்ளமைக்கப்பட்ட கோப்புகள் build/
கோப்புறையில் உள்ளன.
npm run build