बूटस्ट्रैप अउर पार्सल के बा

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

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

अंत तक छोड़ल चाहत बानी? 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

एह बिंदु पर सबकुछ सही जगह पर बा, लेकिन पार्सल के हमनी के सर्वर शुरू करे खातिर एगो एचटीएमएल पेज आ npm स्क्रिप्ट के जरूरत बा।

पार्सल के कॉन्फ़िगर करीं

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

src/index.htmlफाइल भर के देखल जाव . पार्सल के रेंडर करे खातिर एगो पन्ना के जरूरत होला, एहसे हमनी के अपना index.htmlपन्ना के इस्तेमाल कुछ बेसिक एचटीएमएल सेटअप करे खातिर करेनी जा, जवना में हमनी के सीएसएस आ जावास्क्रिप्ट फाइल शामिल बा।
```
<!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>ताकि हमनी के देख सकी जा कि बूटस्ट्रैप के सीएसएस कब वेबपैक से लोड होखेला।

पार्सल स्वचालित रूप से पता लगाई कि हमनी के सास के इस्तेमाल कर रहल बानी जा आ ओकरा के सपोर्ट करे खातिर सास पार्सल प्लगइन इंस्टॉल करी। हालांकि, अगर रउआ चाहत बानी त रउआ मैन्युअल रूप से भी चला सकत बानी 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 आयात डॉक्स पढ़ीं ।
बूटस्ट्रैप के जेएस के आयात करीं। 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 शामिल कइल जा सकेला आ अपना बिल्ड के अनुकूलित कइल जा सकेला खाली बूटस्ट्रैप के CSS आ JS के ओह हिस्सा के आयात करके जवना के रउरा जरूरत बा.

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