मुख्य विषयवस्तु में जाएं डॉक्स नेविगेशन पर जाएं
in English

पार्सल

पार्सल का उपयोग करके अपने प्रोजेक्ट में बूटस्ट्रैप को शामिल करने का तरीका जानें।

पार्सल स्थापित करें

पार्सल बंडलर स्थापित करें ।

बूटस्ट्रैप स्थापित करें

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

जावास्क्रिप्ट आयात करना

अपने ऐप के प्रवेश बिंदु (आमतौर पर ) में बूटस्ट्रैप की जावास्क्रिप्ट आयात करें 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';

सीएसएस आयात करना

बूटस्ट्रैप की पूरी क्षमता का उपयोग करने और इसे अपनी आवश्यकताओं के अनुसार अनुकूलित करने के लिए, अपने प्रोजेक्ट की बंडलिंग प्रक्रिया के एक भाग के रूप में स्रोत फ़ाइलों का उपयोग करें।

बूटस्ट्रैप की 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"
}

देव स्क्रिप्ट चलाएँ

आपका ऐप यहां पर पहुंच योग्य होगा http://127.0.0.1:1234

npm run dev

ऐप फ़ाइलें बनाएं

निर्मित फ़ाइलें build/फ़ोल्डर में हैं।

npm run build