पारसल

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

एह पन्ना पर दिहल गइल बा

पार्सल लगावे के बा

बूटस्ट्रैप के इंस्टॉल करीं

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"
}

देव स्क्रिप्ट चलाईं

राउर ऐप 10 पर सुलभ हो जाई http://127.0.0.1:1234.

npm run dev

ऐप फाइल बनावे के बा

बिल्ट फाइल build/फोल्डर में बा।

npm run build

पारसल