बूटस्ट्रैप एवं पार्सल

पार्सल कें उपयोग करयत अपनय प्रोजेक्ट मे बूटस्ट्रैप कें सीएसएस आ जावास्क्रिप्ट कें शामिल करय आ बंडल करय कें लेल आधिकारिक गाइड.

इस पेज पर

अंत तक छोड़य चाहैत छी? twbs/examples भंडार सं अइ गाइड कें लेल स्रोत कोड आ कार्य डेमो डाउनलोड करूं . अहां उदाहरण कें StackBlitz मे सेहो खोल सकय छी मुदा ओकरा नहि चला सकय छी कियाकि अखन पार्सल ओतय समर्थित नहि छै.

तैयार केनाइ

हम बूटस्ट्रैप के संग एकटा पार्सल प्रोजेक्ट के नबका सं बना रहल छी, ताहि लेल किछु पूर्वापेक्षा आओर अप फ्रंट स्टेप अछि ताहि सं पहिने हम सचमुच शुरू क सकब. एहि गाइड मे अहां कें Node.js इंस्टॉल करनाय आ टर्मिनल सं किछ परिचित होनाय आवश्यक छै.

एकटा प्रोजेक्ट फोल्डर बनाउ आ npm सेटअप करू। हम my-projectफोल्डर बना देब आ npm के -yआर्गुमेंट के संग इनिशियलाइज करब जाहि स ओ हमरा सब स सब इंटरैक्टिव सवाल नै पूछय।
```
mkdir my-project && cd my-project
npm init -y
```
पार्सल स्थापित करब। हमर वेबपैक गाइड के विपरीत, एतय केवल एकटा बिल्ड टूल निर्भरता अछि. पार्सल भाषा ट्रांसफार्मर (जैना सास) कें पता लगावय कें साथ स्वचालित रूप सं इंस्टॉल करतय. हम --save-devसंकेत देबय लेल प्रयोग करैत छी जे ई निर्भरता मात्र विकासक उपयोगक लेल अछि आ उत्पादनक लेल नहि ।
```
npm i --save-dev parcel
```
बूटस्ट्रैप इंस्टॉल करू। आब हम बूटस्ट्रैप इंस्टॉल क सकैत छी। हम पॉपर के सेहो इंस्टॉल करब किएक त हमर ड्रॉपडाउन, पोपोवर, आओर टूलटिप अपन पोजीशनिंग के लेल एहि पर निर्भर करैत अछि. अगर अहां ओहि घटक के उपयोग करय के योजना नहिं बना रहल छी तं अहां एतय पॉपर के छोड़ि सकय छी.
```
npm i --save bootstrap @popperjs/core
```

आब जखन हमरा सभ लग सभ आवश्यक निर्भरता इंस्टॉल भ गेल अछि तखन हम प्रोजेक्ट फाइल बनाबय आ बूटस्ट्रैप आयात करय के काज पर लागि सकैत छी.

परियोजना संरचना

हम पहिने स my-projectफोल्डर बना चुकल छी आ npm के इनिशियलाइज क चुकल छी। आब हम srcप्रोजेक्ट स्ट्रक्चर के गोल करय लेल अपन फोल्डर, स्टाइलशीट, आ जावास्क्रिप्ट फाइल सेहो बना लेब. सँ निम्नलिखित चलाउ my-project, अथवा मैन्युअल रूप सँ नीचाँ देखाओल गेल फोल्डर आओर फाइल संरचना बनाउ.

mkdir {src,src/js,src/scss}
touch src/index.html src/js/main.js src/scss/styles.scss

जखन अहाँ पूरा कए लेब तखन अहाँक पूरा प्रोजेक्ट एहि तरहेँ देखबाक चाही:

my-project/
├── src/
│   ├── js/
│   │   └── main.js
│   ├── scss/
│   │   └── styles.scss
│   └── index.html
├── package-lock.json
└── package.json

एखन सब किछु सही जगह पर अछि, मुदा पार्सल के हमर सर्वर शुरू करय लेल HTML पेज आ npm स्क्रिप्ट के जरूरत अछि.

पार्सल कॉन्फ़िगर करू

निर्भरताक कें इंस्टॉल करय कें साथ आ हमर प्रोजेक्ट फोल्डर हमरा कोडिंग शुरू करय कें लेल तैयार करय कें साथ, हम आब पार्सल कें कॉन्फ़िगर करय सकय छी आ अपन प्रोजेक्ट कें स्थानीय रूप सं चला सकय छी. पार्सल के स्वयं डिजाइन द्वारा कोनो कॉन्फ़िगरेशन फाइल के आवश्यकता नै छै, मुदा हमरा सब के अपन सर्वर शुरू करय लेल एकटा npm स्क्रिप्ट आ एकटा HTML फाइल के जरूरत छै.

src/index.htmlफाइल भरू । पार्सल क॑ रेंडर करै लेली एगो पेज के जरूरत छै, ई लेली हम्मं॑ अपनऽ index.htmlपेज के उपयोग कुछ बेसिक एचटीएमएल सेट करै लेली करै छियै, जेकरा म॑ हमरऽ CSS आरू JavaScript फाइल भी शामिल छै ।
```
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap w/ Parcel</title>
    <link rel="stylesheet" href="scss/styles.scss">
    <script type="module" src="js/main.js"></script>
  </head>
  <body>
    <div class="container py-4 px-3 mx-auto">
      <h1>Hello, Bootstrap and Parcel!</h1>
      <button class="btn btn-primary">Primary button</button>
    </div>
  </body>
</html>
```
div class="container"हम एतय आओर के संग बूटस्ट्रैप स्टाइलिंग के कनि-मनि शामिल क रहल छी जाहि सं <button>हम देखब जे बूटस्ट्रैप के सीएसएस वेबपैक द्वारा कखन लोड कएल गेल अछि.

पार्सल स्वचालित रूप सं पता लगायत जे हम Sass कें उपयोग करय रहल छी आ ओकरा समर्थन करय कें लेल Sass पार्सल प्लगइन इंस्टॉल करतय. मुदा, जं चाहब तं मैन्युअल रूप सं सेहो चला सकैत छी npm i --save-dev @parcel/transformer-sass.
पार्सल npm स्क्रिप्ट जोड़ू। खोलू आ ऑब्जेक्ट package.jsonमे निम्नलिखित startस्क्रिप्ट जोड़ू। scriptsहम ई स्क्रिप्ट के उपयोग अपनऽ पार्सल डेवलपमेंट सर्वर क॑ शुरू करै लेली करबै आरू ओकरा distडायरेक्टरी म॑ संकलित करला के बाद जे एचटीएमएल फाइल बनाबै छै ओकरा रेंडर करै लेली करबै ।
```
{
   // ...
   "scripts": {
     "start": "parcel serve src/index.html --public-url / --dist-dir dist",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   // ...
}
```
आ अंत मे, हम पार्सल शुरू क सकैत छी। अपन टर्मिनल मे फोल्डर सँ my-project, ओ नव जोडल गेल npm स्क्रिप्ट चलाउ:
```
npm start
```

एहि गाइड के अगिला आ अंतिम खंड मे, हम बूटस्ट्रैप के सभ सीएसएस आओर जावास्क्रिप्ट आयात करब.

बूटस्ट्रैप आयात करू

बूटस्ट्रैप कें पार्सल मे आयात करय कें लेल दूटा आयात कें आवश्यकता होयत छै, एकटा हमर styles.scssमे आ एकटा हमर मे main.js.

बूटस्ट्रैप के सीएसएस आयात करू। src/scss/styles.scssबूटस्ट्रैप क' सभटा स्रोत Sass आयात करबाक लेल निम्नलिखित केँ जोड़ू .
```
// Import all of Bootstrap's CSS
@import "~bootstrap/scss/bootstrap";
```
अहां चाहब त हमर स्टाइलशीट के अलग-अलग सेहो आयात क सकय छी. विस्तार स जानकारी लेल हमर Sass import docs पढ़ू ।
बूटस्ट्रैप के जे एस आयात करू। src/js/main.jsबूटस्ट्रैप क सभ जेएस आयात करबाक लेल निम्नलिखित मे जोड़ू . पॉपर बूटस्ट्रैप क माध्यम स स्वचालित रूप स आयात भ जाएत।
```
// Import all of Bootstrap's JS
import * as bootstrap from 'bootstrap'
```
बंडल आकार कम रखबाक लेल अहाँ आवश्यकतानुसार व्यक्तिगत रूप सँ जावास्क्रिप्ट प्लगइन सेहो आयात कए सकैत छी:
```
import Alert from 'bootstrap/js/dist/alert'

// or, specify which plugins you need:
import { Tooltip, Toast, Popover } from 'bootstrap'
```
बूटस्ट्रैप के प्लगइन के उपयोग करय के तरीका के बारे में बेसी जानकारी के लेल हमर जावास्क्रिप्ट डॉक्स पढ़ू .
आ अहाँक काज भ' गेल! 🎉 बूटस्ट्रैप के स्रोत Sass आ JS के पूरा लोड भ गेल अछि, आब अहां के लोकल डेवलपमेंट सर्वर एहि तरहे देखय के चाही.

आब अहां कोनों बूटस्ट्रैप घटक कें जोड़नाय शुरू कयर सकय छी जेकरा अहां उपयोग करय चाहय छी. अतिरिक्त कस्टम Sass क॑ कोना शामिल करलऽ जाय आरू केवल बूटस्ट्रैप केरऽ CSS आरू JS केरऽ वू भाग क॑ आयात करी क॑ अपनऽ बिल्ड क॑ अनुकूलित करलऽ जाय छै जेकरऽ जरूरत छै, ओकरा लेली पूरा पार्सल उदाहरण प्रोजेक्ट क॑ जरूर देखना जरूरी छै ।

एतय किछु गलत वा पुरान देखलहुँ? कृपया GitHub पर एकटा मुद्दा खोलू . समस्या निवारण मे मदद चाही? GitHub पर खोज करू अथवा चर्चा शुरू करू .