पार्सल
पार्सल का उपयोग करके अपने प्रोजेक्ट में बूटस्ट्रैप को शामिल करने का तरीका जानें।
पार्सल स्थापित करें
पार्सल बंडलर स्थापित करें ।
बूटस्ट्रैप स्थापित करें
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