बूटस्ट्रॅप आणि Vite

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

या पृष्ठावर

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

सेटअप

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

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

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

प्रकल्प रचना

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

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

तुम्ही पूर्ण केल्यावर, तुमचा पूर्ण प्रकल्प यासारखा दिसला पाहिजे:

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

या टप्प्यावर, सर्वकाही योग्य ठिकाणी आहे, परंतु Vite कार्य करणार नाही कारण आम्ही vite.config.jsअद्याप भरलेले नाही.

Vite कॉन्फिगर करा

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

vite.config.jsतुमच्या संपादकात उघडा . ते रिकामे असल्याने, आम्हाला त्यात काही बॉयलरप्लेट कॉन्फिगरेशन जोडावे लागेल जेणेकरून आम्ही आमचा सर्व्हर सुरू करू शकू. कॉन्फिगरेशनचा हा भाग Vite ला आमच्या प्रोजेक्टची JavaScript आणि डेव्हलपमेंट सर्व्हरने कसे वागावे ( srcहॉट रीलोडसह फोल्डरमधून खेचणे) शोधायचे आहे असे सांगते.
```
const path = require('path')

export default {
  root: path.resolve(__dirname, 'src'),
  server: {
    port: 8080,
    hot: true
  }
}
```
पुढे आम्ही भरतो src/index.html. बंडल केलेले CSS आणि JS वापरण्यासाठी Vite ब्राउझरमध्ये लोड होईल असे हे HTML पृष्ठ आहे जे आम्ही नंतरच्या चरणांमध्ये जोडू.
```
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap w/ Vite</title>
  </head>
  <body>
    <div class="container py-4 px-3 mx-auto">
      <h1>Hello, Bootstrap and Vite!</h1>
      <button class="btn btn-primary">Primary button</button>
    </div>
    <script type="module" src="./js/main.js"></script>
  </body>
</html>
```
आम्ही येथे थोडेसे बूटस्ट्रॅप स्टाइलिंग समाविष्ट करत आहोत div class="container"आणि <button>जेणेकरून बूटस्ट्रॅपचे CSS Vite द्वारे लोड केले जाते तेव्हा आम्हाला दिसेल.
आता Vite चालवण्यासाठी npm स्क्रिप्टची गरज आहे. खाली दर्शविलेली स्क्रिप्ट उघडा package.jsonआणि जोडा start(तुमच्याकडे आधीपासूनच चाचणी स्क्रिप्ट असणे आवश्यक आहे). आम्ही आमचा स्थानिक Vite dev सर्व्हर सुरू करण्यासाठी ही स्क्रिप्ट वापरू.
```
{
  // ...
  "scripts": {
    "start": "vite",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  // ...
}
```
आणि शेवटी, आम्ही Vite सुरू करू शकतो. तुमच्या टर्मिनलमधील my-projectफोल्डरमधून, नवीन जोडलेली एनपीएम स्क्रिप्ट चालवा:
```
npm start
```

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

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

मध्ये बूटस्ट्रॅपचे Sass आयात सेट करा vite.config.js. तुमची कॉन्फिगरेशन फाइल आता पूर्ण झाली आहे आणि ती खालील स्निपेटशी जुळली पाहिजे. येथे फक्त नवीन भाग विभाग आहे - आम्ही आयात शक्य तितके सोपे ठेवण्यासाठी resolveआमच्या स्त्रोत फाइल्समध्ये उपनाव जोडण्यासाठी याचा वापर करतो .node_modules
```
const path = require('path')

export default {
  root: path.resolve(__dirname, 'src'),
  resolve: {
    alias: {
      '~bootstrap': path.resolve(__dirname, 'node_modules/bootstrap'),
    }
  },
  server: {
    port: 8080,
    hot: true
  }
}
```
आता, बूटस्ट्रॅपचे CSS आयात करू. src/scss/styles.scssबूटस्ट्रॅपचे सर्व स्त्रोत Sass आयात करण्यासाठी खालील जोडा .
```
// Import all of Bootstrap's CSS
@import "~bootstrap/scss/bootstrap";
```
तुम्हाला हवे असल्यास तुम्ही आमची स्टाइलशीट स्वतंत्रपणे आयात देखील करू शकता. तपशीलांसाठी आमचे Sass आयात दस्तऐवज वाचा .
पुढे आपण CSS लोड करतो आणि बूटस्ट्रॅपची JavaScript आयात करतो. CSS लोड करण्यासाठी खालील जोडा src/js/main.jsआणि बूटस्ट्रॅपचे सर्व JS आयात करा. बूटस्ट्रॅपद्वारे पॉपर स्वयंचलितपणे आयात केले जाईल.
```
// Import our custom CSS
import '../scss/styles.scss'

// 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 कसे समाविष्ट करायचे आणि तुमची बिल्ड कशी ऑप्टिमाइझ करायची यासाठी संपूर्ण Vite उदाहरण प्रकल्प तपासण्याचे सुनिश्चित करा .

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