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

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 आरू Bootstrap के अलावा, हमरा सब क॑ Bootstrap केरऽ 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 द्वारा लोड कएल गेल अछि.
आब हमरा सभकेँ Vite चलाबय लेल npm स्क्रिप्ट चाही। नीचा देखाओल गेल स्क्रिप्ट खोलू package.jsonआ जोड़ू start(अहाँ लग पहिने सँ परीक्षण स्क्रिप्ट हेबाक चाही)। हम अपन स्थानीय Vite dev सर्वर शुरू करबाक लेल एहि स्क्रिप्ट क उपयोग करब.
```
{
  // ...
  "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
  }
}
```
आब, बूटस्ट्रैप के CSS आयात करू. src/scss/styles.scssबूटस्ट्रैप क' सभटा स्रोत Sass आयात करबाक लेल निम्नलिखित केँ जोड़ू .
```
// Import all of Bootstrap's CSS
@import "~bootstrap/scss/bootstrap";
```
अहां चाहब त हमर स्टाइलशीट के अलग-अलग सेहो आयात क सकय छी. विस्तार स जानकारी लेल हमर Sass import docs पढ़ू ।
अगिला हम CSS लोड करैत छी आ Bootstrap के जावास्क्रिप्ट आयात करैत छी | src/js/main.jsCSS लोड करबाक लेल आओर Bootstrap क सभ 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';
```
बूटस्ट्रैप के प्लगइन के उपयोग करय के तरीका के बारे में बेसी जानकारी के लेल हमर जावास्क्रिप्ट डॉक्स पढ़ू .
आ अहाँक काज भ' गेल! 🎉 बूटस्ट्रैप के स्रोत Sass आ JS के पूरा लोड भ गेल अछि, आब अहां के लोकल डेवलपमेंट सर्वर एहि तरहे देखय के चाही.

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

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