बूटस्ट्रैप एंड विटे

Vite दा इस्तेमाल करदे होई अपने प्रोजेक्ट च बूटस्ट्रैप दे CSS ते जावास्क्रिप्ट गी किस चाल्ली शामल करना ते बंडल करना ऐ इसदे आस्तै आधिकारिक गाइड.

इस पेज पर

अंत तक छड्डना चांदे ओ? twbs/examples रिपोजिटरी थमां इस गाइड आस्तै स्रोत कोड ते कम्म करने आह् ला डेमो डाउनलोड करो . तुस लाइव संपादन आस्तै StackBlitz च बी उदाहरन खोल्ली सकदे ओ।

सेट अप

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

इक प्रोजेक्ट फोल्डर बनाओ ते एनपीएम सेटअप करो। my-projectअस फोल्डर बनागे ते npm गी -yआर्गुमेंट कन्नै इनिशियलाइज करगे तां जे एह् असेंगी सारे इंटरएक्टिव सवाल पुच्छने थमां बचाई सकै।
```
mkdir my-project && cd my-project
npm init -y
```
विटे स्थापित करो। साढ़े वेबपैक गाइड दे विपरीत, इत्थै सिर्फ इक गै बिल्ड टूल निर्भरता ऐ। अस --save-devइस गल्लै दा संकेत देने दा इस्तेमाल करदे आं जे एह् निर्भरता सिर्फ विकास दे इस्तेमाल आस्तै ऐ ते उत्पादन आस्तै नेईं।
```
npm i --save-dev vite
```
बूटस्ट्रैप इंस्टॉल करो। हुण अस बूटस्ट्रैप इंस्टॉल करी सकने आं। अस Popper गी बी इंस्टॉल करगे की जे साढ़े ड्रॉपडाउन, पोपोवर, ते टूलटिप उंदी स्थिति आस्तै इस पर निर्भर करदे न। जेकर तुस उनें घटकें दा इस्तेमाल करने दी योजना नेईं बनांदे ओ तां तुस इत्थें पॉपर गी छड्डी सकदे ओ।
```
npm i --save bootstrap @popperjs/core
```
अतिरिक्त निर्भरता स्थापित करो। Vite ते 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 चलाने लेई इक npm स्क्रिप्ट दी लोड़ ऐ। हेठ दित्ती गेदी स्क्रिप्ट गी खोलो package.jsonते जोड़ो start(तुंदे कोल पैह् ले थमां गै परीक्षण स्क्रिप्ट होनी चाहिदी)। अस इस स्क्रिप्ट दा इस्तेमाल अपने लोकल Vite देव सर्वर गी शुरू करने आस्तै करगे।
```
{
  // ...
  "scripts": {
    "start": "vite",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  // ...
}
```
ते आखरी च, अस विटे शुरू करी सकने आं। अपने टर्मिनल च फोल्डर थमां my-project, उस नमीं जोड़ी दी npm स्क्रिप्ट चलाओ:
```
npm start
```

इस गाइड दे अगले ते अंतिम खंड च, अस बूटस्ट्रैप दे सारे CSS ते जावास्क्रिप्ट आयात करगे.

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

च बूटस्ट्रैप दा 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 आयात डॉक्स पढ़ो ।
अगले अस CSS लोड करदे आं ते बूटस्ट्रैप दी जावास्क्रिप्ट आयात करदे आं। 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';
```
बूटस्ट्रैप दे प्लगइन्स दा इस्तेमाल करने दे तरीकें बारै होर मती जानकारी आस्तै साढ़े जावास्क्रिप्ट डॉक्स पढ़ो .
ते तुसी खत्म होई गेदे ओ! 🎉 बूटस्ट्रैप दा स्रोत Sass ते JS पूरी चाल्ली लोड होने कन्नै, तुंदा लोकल विकास सर्वर हुन इस चाल्ली दिक्खना चाहिदा ऐ।

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

इत्थें कोई गलत या पुरानी गल्ल दिक्खी? कृपा करियै GitHub पर इक मुद्दा खोलो . समस्या निवारन च मदद दी लोड़ ऐ ? GitHub पर सर्च करो जां इक चर्चा शुरू करो ।