बूटस्ट्रैप एंड वाइट के बा

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

एह पन्ना पर दिहल गइल बा

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

सेटअप

हमनी के बूटस्ट्रैप के संगे एगो 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.config.jsअबहीं ले आपन नइखीं भरले.

विटे के कॉन्फ़िगर करीं

डिपेंडेंसी इंस्टॉल होखला के बाद अवुरी हमनी के प्रोजेक्ट फोल्डर हमनी के कोडिंग शुरू करे खाती तैयार होखला के संगे अब हमनी के Vite के कॉन्फ़िगर क सकतानी अवुरी आपन प्रोजेक्ट के स्थानीय रूप से चला सकतानी।

vite.config.jsअपना संपादक में खोलीं . चुकी इ खाली बा एहसे हमनी के एकरा में कुछ बॉयलरप्लेट कॉन्फ़िगरेशन जोड़ल जरूरी होई ताकि हमनी के आपन सर्वर शुरू क सकी। कॉन्फ़िगरेशन के ई हिस्सा बतावेला कि Vite के हमनी के प्रोजेक्ट के जावास्क्रिप्ट के खोज करे के रहे आ डेवलपमेंट सर्वर के कइसे व्यवहार करे के चाहीं ( srcहॉट रिलोड के साथ फोल्डर से खींच के)।
```
const path = require('path')

export default {
  root: path.resolve(__dirname, 'src'),
  server: {
    port: 8080,
    hot: true
  }
}
```
आगे हमनी के भर देनी जा src/index.html. ई HTML पन्ना ह Vite ब्राउजर में लोड करी बंडल CSS आ JS के उपयोग करे खातिर हमनी के बाद के चरण में एकरा में जोड़ब जा।
```
<!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 चलावे खातिर npm स्क्रिप्ट के जरूरत बा। नीचे देखावल स्क्रिप्ट खोलीं package.jsonआ जोड़ीं start(रउरा लगे पहिले से परीक्षण स्क्रिप्ट होखे के चाहीं)। हमनी के एह स्क्रिप्ट के इस्तेमाल आपन स्थानीय Vite देव सर्वर शुरू करे खातिर करब जा।
```
{
  // ...
  "scripts": {
    "start": "vite",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  // ...
}
```
आ आखिर में हमनी का विटे शुरू कर सकीले. अपना टर्मिनल में फोल्डर से 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
  }
}
```
अब, बूटस्ट्रैप के सीएसएस आयात कइल जाव. src/scss/styles.scssबूटस्ट्रैप के सभ स्रोत Sass आयात करे खातिर निम्नलिखित में जोड़ीं ।
```
// Import all of Bootstrap's CSS
@import "~bootstrap/scss/bootstrap";
```
अगर रउरा चाहत बानी त हमनी के स्टाइलशीट के अलग-अलग आयात भी कर सकेनी। विस्तार से जाने खातिर हमनी के Sass आयात डॉक्स पढ़ीं ।
एकरा बाद हमनी के सीएसएस लोड क के बूटस्ट्रैप के जावास्क्रिप्ट आयात करेनी जा। src/js/main.jsसीएसएस लोड करे खातिर निम्नलिखित में जोड़ीं आ बूटस्ट्रैप के सभ जेएस आयात करीं। पॉपर के बूटस्ट्रैप के माध्यम से स्वचालित रूप से आयात कईल जाई।
```
// Import our custom CSS
import '../scss/styles.scss'

// 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';
```
बूटस्ट्रैप के प्लगइन के इस्तेमाल करे के तरीका के बारे में अधिक जानकारी खातिर हमनी के जावास्क्रिप्ट डॉक्स पढ़ीं ।
आ रउरा त काम हो गइल! 🎉 बूटस्ट्रैप के स्रोत सास आ जेएस पूरा लोड होखला के बाद अब राउर लोकल डेवलपमेंट सर्वर अइसन होखे के चाहीं।

अब रउआ कवनो बूटस्ट्रैप घटक के जोड़ल शुरू कर सकेनी जवना के रउआ इस्तेमाल करे के चाहत बानी। पूरा Vite उदाहरण प्रोजेक्ट के जरूर देखीं कि कइसे अतिरिक्त कस्टम Sass शामिल कइल जा सकेला आ अपना बिल्ड के अनुकूलित कइल जा सकेला खाली बूटस्ट्रैप के CSS आ JS के ओह हिस्सा के आयात करके जवना के रउरा जरूरत बा.

इहाँ कुछ गलत भा पुरान देखत बानी? कृपया गिटहब पर एगो मुद्दा खोलीं . समस्या निवारण में मदद के जरूरत बा? गिटहब पर खोज करीं भा चर्चा शुरू करीं .