पार्सल

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

इस पृष्ठ पर

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

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

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

पार्सल