बूटस्ट्रॅप आनी पार्सल

पार्सल वापरून तुमच्या प्रकल्पांत Bootstrap चो CSS आनी JavaScript कसो आस्पाव करचो आनी बंडल करचो हाचे खातीर अधिकृत मार्गदर्शक.

ह्या पानाचेर

शेवटाक वचपाक जाय? ह्या मार्गदर्शका खातीर स्त्रोत कोड आनी काम करपी डेमो twbs/examples रिपॉझिटरींतल्यान डावनलोड करात . तुमी StackBlitz तय उदाहरण उगडूंक शकतात पूण तें चालीक लावचें न्हय कारण Parcel सद्या थंय समर्थीत ना.

स्थापना

आमी बूटस्ट्रॅपा वांगडा सुरवाती सावन एक पार्सल प्रकल्प तयार करतात, देखून आमी खऱ्यांनीच सुरू करचे पयलीं कांय पूर्वगरज आनी मुखार पावलां आसात. ह्या मार्गदर्शकांत तुमकां Node.js प्रतिष्ठापीत आसपाक जाय आनी टर्मिनला कडेन कांय परिचिती आसपाक जाय.

एक प्रकल्प फोल्डर तयार करात आनी npm सेटअप करात. आमी फोल्डर तयार करतले आनी npm आमकां सगळे परस्पर प्रस्न विचारचे न्हय म्हूण आर्ग्युमेंटान my-projectआरंभ करतले.-y
```
mkdir my-project && cd my-project
npm init -y
```
पार्सल स्थापन करचें. आमच्या वेबपॅक मार्गदर्शका परस वेगळें, हांगा फकत एकूच बिल्ड साधन अवलंबन आसा. पार्सल आपोआप भास ट्रान्सफॉर्मर (सास सारके) सोदून काडटले तशे स्थापन करतले. --save-devही अवलंबन फकत उदरगतीच्या वापरा खातीर आसा आनी उत्पादन खातीर न्हय असो संकेत दिवपाक आमी वापरतात .
```
npm i --save-dev parcel
```
बूटस्ट्रॅप स्थापन करचें. आतां आमी Bootstrap स्थापन करूंक शकतात. आमचे ड्रॉपडावन, पॉपओव्हर, आनी टूलटिप्स तांच्या स्थिती खातीर ताचेर आदारून आशिल्ल्यान आमी Popper लेगीत स्थापीत करतले. तुमी ते घटक वापरपाची येवजण करूंक ना जाल्यार, तुमी हांगा पॉपर वगळूंक शकतात.
```
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 फायलीं सयत कांय मुळावे 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>
```
आमी हांगा Bootstrap स्टायलिंगाचें थोडें समाविष्ट केलां div class="container"आनी <button>ताका लागून आमी पळयतात की Bootstrap चें CSS Webpack कडल्यान केन्ना लोड जाता.

पार्सल आपोआप आमी Sass वापरतात तें कळटलें आनी ताका तेंको दिवपाक Sass Parcel प्लगइन प्रतिष्ठापीत करतलें. पूण, तुमकां जाय जाल्यार, तुमी हाताळणीनय चालीक लावंक शकतात npm i --save-dev @parcel/transformer-sass.
पार्सल npm लिपी जोडात. उगडात आनी वस्तूंत सकयल दिल्ले स्क्रिप्ट package.jsonजोडात . आमचो पार्सल विकास सर्वर सुरू करपाक आनी आमी तयार केल्ली HTML फायल निर्देशिकेंत संकलित केल्या उपरांत रेंडर करपाक आमी ही स्क्रिप्ट वापरतले .startscriptsdist
```
{
   // ...
   "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
```

ह्या मार्गदर्शकाच्या फुडल्या आनी निमाण्या विभागांत, आमी Bootstrap ची सगळी CSS आनी JavaScript आयात करतले.

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

बूटस्ट्रॅप पार्सलांत आयात करपाक दोन आयात करची पडटा, एक आमच्यांत styles.scssआनी एक आमच्या main.js.

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

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

हांगा कितें तरी चुकीचें वा काळांतरान गेल्लें दिसता? उपकार करून GitHub चेर एक मुद्दो उगडात . समस्या निवारण करपाक मदत जाय? GitHub चेर सोद घेयात वा चर्चा सुरू करात.