முக்கிய உள்ளடக்கத்திற்கு செல்க டாக்ஸ் வழிசெலுத்தலுக்குச் செல்லவும்
in English

பார்சல்

பார்சலைப் பயன்படுத்தி உங்கள் திட்டத்தில் பூட்ஸ்டார்ப்பை எவ்வாறு சேர்ப்பது என்பதை அறிக.

இந்தப் பக்கத்தில்

பார்சலை நிறுவவும்

பார்சல் பண்ட்லரை நிறுவவும் .

பூட்ஸ்டார்ப் நிறுவவும்

npm ஐப் பயன்படுத்தி Bootstrap ஐ 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ஸ்கிரிப்ட்களைச் சேர்க்கவும் .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"
}

டெவ் ஸ்கிரிப்டை இயக்கவும்

உங்கள் பயன்பாட்டை அணுக முடியும் http://127.0.0.1:1234.

npm run dev

பயன்பாட்டு கோப்புகளை உருவாக்கவும்

உள்ளமைக்கப்பட்ட கோப்புகள் build/கோப்புறையில் உள்ளன.

npm run build