बूटस्ट्रॅप आणि पार्सल

पार्सल वापरून तुमच्या प्रोजेक्टमध्ये बूटस्ट्रॅपचे CSS आणि JavaScript कसे समाविष्ट करावे आणि बंडल कसे करावे यासाठी अधिकृत मार्गदर्शक.

या पृष्ठावर

शेवटपर्यंत वगळू इच्छिता? या मार्गदर्शकासाठी स्रोत कोड आणि कार्यरत डेमो twbs/examples repository मधून डाउनलोड करा . तुम्ही StackBlitz मध्ये देखील उदाहरण उघडू शकता परंतु ते चालवू शकत नाही कारण पार्सल सध्या तेथे समर्थित नाही.

सेटअप

आम्ही सुरवातीपासून बूटस्ट्रॅपसह एक पार्सल प्रकल्प तयार करत आहोत, त्यामुळे आम्ही खरोखर प्रारंभ करू शकण्यापूर्वी काही पूर्वतयारी आणि पुढील पायऱ्या आहेत. या मार्गदर्शकासाठी तुम्हाला Node.js स्थापित करणे आणि टर्मिनलशी काही परिचित असणे आवश्यक आहे.

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

आता आमच्याकडे सर्व आवश्यक अवलंबन स्थापित केले आहेत, आम्ही प्रकल्प फायली तयार करणे आणि बूटस्ट्रॅप आयात करण्याचे काम करू शकतो.

प्रकल्प रचना

आम्ही आधीच my-projectफोल्डर तयार केले आहे आणि एनपीएम सुरू केले आहे. आता आम्ही srcप्रोजेक्ट स्ट्रक्चर पूर्ण करण्यासाठी आमचे फोल्डर, स्टाइलशीट आणि JavaScript फाइल देखील तयार करू. वरून खालील चालवा 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 स्क्रिप्टची आवश्यकता आहे.

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

डिपेंडेंसी इंस्‍टॉल केल्‍याने आणि आमचे प्रोजेक्‍ट फोल्‍डर कोडिंग सुरू करण्‍यासाठी तयार असल्‍याने, आम्‍ही आता पार्सल कॉन्फिगर करू शकतो आणि आमचा प्रोजेक्‍ट स्‍थानिकपणे चालवू शकतो. पार्सलला स्वतःच डिझाइननुसार कॉन्फिगरेशन फाइलची आवश्यकता नाही, परंतु आम्हाला आमचा सर्व्हर सुरू करण्यासाठी एनपीएम स्क्रिप्ट आणि एचटीएमएल फाइलची आवश्यकता आहे.

src/index.htmlफाईल भरा . पार्सलला रेंडर करण्यासाठी पृष्ठ आवश्यक आहे, म्हणून आम्ही आमच्या index.htmlपृष्ठाचा वापर आमच्या CSS आणि JavaScript फाइल्ससह काही मूलभूत 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>जेणेकरून आम्ही बूटस्ट्रॅपचे CSS वेबपॅकद्वारे लोड केले जाते तेव्हा पाहू.

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

या मार्गदर्शकाच्या पुढील आणि अंतिम विभागात, आम्ही बूटस्ट्रॅपचे सर्व CSS आणि JavaScript आयात करू.

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

पार्सलमध्ये बूटस्ट्रॅप आयात करण्यासाठी दोन आयात आवश्यक आहेत, एक आमच्यामध्ये 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सर्व बूटस्ट्रॅपचे जेएस आयात करण्यासाठी खालील जोडा . बूटस्ट्रॅपद्वारे पॉपर स्वयंचलितपणे आयात केले जाईल.
```
// 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'
```
Bootstrap चे प्लगइन कसे वापरावे याबद्दल अधिक माहितीसाठी आमचे JavaScript डॉक्स वाचा .
आणि तुम्ही पूर्ण केले! 🎉 बूटस्ट्रॅपचा स्त्रोत Sass आणि JS पूर्णपणे लोड झाल्यामुळे, तुमचा स्थानिक विकास सर्व्हर आता यासारखा दिसला पाहिजे.

आता तुम्ही वापरू इच्छित असलेले कोणतेही बूटस्ट्रॅप घटक जोडणे सुरू करू शकता. तुम्हाला आवश्यक असलेले बूटस्ट्रॅपचे CSS आणि JS चे फक्त भाग आयात करून अतिरिक्त सानुकूल Sass कसे समाविष्ट करायचे आणि तुमची बिल्ड कशी ऑप्टिमाइझ करायची यासाठी संपूर्ण पार्सल उदाहरण प्रकल्प तपासण्याचे सुनिश्चित करा .

येथे काहीतरी चुकीचे किंवा कालबाह्य दिसत आहे? कृपया GitHub वर एक समस्या उघडा . समस्यानिवारणासाठी मदत हवी आहे? GitHub वर शोधा किंवा चर्चा सुरू करा.