पार्सल

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

इस पेज पर

पार्सल स्थापित करब

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

npm क उपयोग कए कए एकटा Node.js मॉड्यूल क रूप मे बूटस्ट्रैप कए इंस्टॉल करू .

बूटस्ट्रैप Popper पर निर्भर करैत अछि , जे 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

पार्सल