बूटस्ट्रैप और पार्सल

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

इस पृष्ठ पर

अंत तक छोड़ना चाहते हैं? twbs/examples रिपॉजिटरी से इस गाइड के लिए सोर्स कोड और वर्किंग डेमो डाउनलोड करें । आप स्टैकब्लिट्ज में भी उदाहरण खोल सकते हैं लेकिन इसे नहीं चला सकते क्योंकि पार्सल वर्तमान में वहां समर्थित नहीं है।

स्थापित करना

हम शुरू से बूटस्ट्रैप के साथ एक पार्सल प्रोजेक्ट बना रहे हैं, इसलिए इससे पहले कि हम वास्तव में शुरू कर सकें, कुछ पूर्वापेक्षाएँ और आगे के चरण हैं। इस गाइड के लिए आपको Node.js इंस्टॉल करना होगा और टर्मिनल से कुछ परिचित होना होगा।

एक प्रोजेक्ट फोल्डर बनाएं और npm सेटअप करें। हम my-projectफोल्डर बनाएंगे और npm को इस -yतर्क के साथ इनिशियलाइज़ करेंगे कि वह हमसे सभी इंटरेक्टिव प्रश्न न पूछे।
```
mkdir my-project && cd my-project
npm init -y
```
पार्सल स्थापित करें। हमारे वेबपैक गाइड के विपरीत, यहां केवल एक बिल्ड टूल निर्भरता है। पार्सल स्वचालित रूप से भाषा ट्रांसफार्मर (जैसे Sass) स्थापित करेगा क्योंकि यह उनका पता लगाता है। हम --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पेज का इस्तेमाल कुछ बेसिक एचटीएमएल को सेट करने के लिए करते हैं, जिसमें हमारी सीएसएस और जावास्क्रिप्ट फाइलें शामिल हैं।
```
<!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 Parcel प्लगइन स्थापित करें । हालाँकि, यदि आप चाहें, तो आप मैन्युअल रूप से भी चला सकते हैं npm i --save-dev @parcel/transformer-sass।
पार्सल एनपीएम स्क्रिप्ट जोड़ें। खोलें और ऑब्जेक्ट package.jsonमें निम्न startस्क्रिप्ट जोड़ें। हम इस स्क्रिप्ट का उपयोग अपने पार्सल विकास सर्वर को शुरू करने और निर्देशिका scriptsमें संकलित होने के बाद बनाई गई HTML फ़ाइल को प्रस्तुत करने के लिए करेंगे ।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.

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