बूटस्ट्रैप और विटे

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

इस पृष्ठ पर

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

स्थापित करना

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

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

अब जब हमारे पास सभी आवश्यक निर्भरताएं स्थापित और सेटअप हैं, तो हम प्रोजेक्ट फाइल बनाने और बूटस्ट्रैप आयात करने के लिए काम कर सकते हैं।

परियोजना संरचना

हमने पहले ही my-projectफोल्डर बना लिया है और npm को इनिशियलाइज़ कर दिया है। अब हम srcप्रोजेक्ट स्ट्रक्चर को राउंड आउट करने के लिए अपना फोल्डर, स्टाइलशीट और जावास्क्रिप्ट फाइल भी बनाएंगे। से निम्नलिखित चलाएँ 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.config.jsअपने संपादक में खोलें । चूंकि यह खाली है, हमें इसमें कुछ बॉयलरप्लेट कॉन्फिगर जोड़ने की आवश्यकता होगी ताकि हम अपना सर्वर शुरू कर सकें। कॉन्फिग का यह हिस्सा बताता है कि विटे को हमारी परियोजना की जावास्क्रिप्ट की तलाश करनी थी और विकास सर्वर को कैसे व्यवहार करना चाहिए ( srcहॉट रीलोड के साथ फ़ोल्डर से खींचना)।
```
const path = require('path')

export default {
  root: path.resolve(__dirname, 'src'),
  server: {
    port: 8080,
    hot: true
  }
}
```
आगे हम भरते हैं src/index.html। बंडल किए गए CSS और JS का उपयोग करने के लिए यह HTML पृष्ठ Vite ब्राउज़र में लोड होगा जिसे हम बाद के चरणों में जोड़ेंगे।
```
<!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>ताकि हम देख सकें कि जब बूटस्ट्रैप का सीएसएस Vite द्वारा लोड किया जाता है।
अब हमें Vite को चलाने के लिए एक npm स्क्रिप्ट की आवश्यकता है। नीचे दिखाई गई स्क्रिप्ट खोलें package.jsonऔर जोड़ें start(आपके पास पहले से ही परीक्षण स्क्रिप्ट होनी चाहिए)। हम अपने स्थानीय Vite dev सर्वर को प्रारंभ करने के लिए इस स्क्रिप्ट का उपयोग करेंगे।
```
{
  // ...
  "scripts": {
    "start": "vite",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  // ...
}
```
और अंत में, हम Vite शुरू कर सकते हैं। अपने टर्मिनल के my-projectफ़ोल्डर से, उस नई जोड़ी गई npm स्क्रिप्ट को चलाएँ:
```
npm start
```

इस गाइड के अगले और अंतिम खंड में, हम बूटस्ट्रैप के सभी सीएसएस और जावास्क्रिप्ट को आयात करेंगे।

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

बूटस्ट्रैप के 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 को इम्पोर्ट करते हैं। src/js/main.jsCSS को लोड करने के लिए निम्नलिखित जोड़ें और बूटस्ट्रैप के सभी 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';
```
बूटस्ट्रैप के प्लगइन्स का उपयोग करने के तरीके के बारे में अधिक जानकारी के लिए हमारे जावास्क्रिप्ट दस्तावेज़ पढ़ें ।
और आपने कल लिया! बूटस्ट्रैप के स्रोत Sass और JS के पूरी तरह से लोड होने के साथ, आपका स्थानीय विकास सर्वर अब इस तरह दिखना चाहिए ।

अब आप किसी भी बूटस्ट्रैप घटक को जोड़ना शुरू कर सकते हैं जिसका आप उपयोग करना चाहते हैं। अतिरिक्त कस्टम Sass को कैसे शामिल करें और बूटस्ट्रैप के CSS और JS के केवल उन हिस्सों को आयात करके अपने निर्माण को अनुकूलित करने के लिए संपूर्ण Vite उदाहरण प्रोजेक्ट की जाँच करना सुनिश्चित करें , जिनकी आपको आवश्यकता है।

यहां कुछ गलत या पुराना देखें? कृपया GitHub पर एक समस्या खोलें । समस्या निवारण में सहायता चाहिए? GitHub पर खोजें या चर्चा शुरू करें।