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

Vite इत्यस्य उपयोगेन Bootstrap इत्यस्य CSS तथा JavaScript इत्येतत् भवतः परियोजनायां कथं समावेशयितव्यं बण्डल् च करणीयम् इति आधिकारिकमार्गदर्शिका ।

इस पृष्ठ पर

अन्त्यपर्यन्तं लङ्घयितुम् इच्छति वा ? अस्य मार्गदर्शिकायाः स्रोतसङ्केतं कार्यप्रदर्शनं च twbs/examples भण्डारतः डाउनलोड् कुर्वन्तु । लाइव सम्पादनार्थं StackBlitz इत्यत्र अपि उदाहरणं उद्घाटयितुं शक्नुवन्ति ।

स्थापयति

वयं Bootstrap इत्यनेन सह Vite परियोजनां शुद्धतः निर्मामः, अतः वयं वास्तवतः आरम्भं कर्तुं शक्नुमः तस्मात् पूर्वं केचन पूर्वापेक्षाः अपि च अग्रे पदानि सन्ति । अस्मिन् मार्गदर्शके भवद्भिः Node.js संस्थापितम् अस्ति तथा च टर्मिनल् इत्यनेन सह किञ्चित् परिचितता आवश्यकी अस्ति ।

एकं प्रोजेक्ट् फोल्डर् रचयन्तु तथा npm सेटअप कुर्वन्तु । वयं my-projectफोल्डर् रचयिष्यामः तथा च npm इत्येतत् -yआर्गुमेण्ट् इत्यनेन सह प्रारम्भं कुर्मः यत् अस्मान् सर्वान् अन्तरक्रियाशीलप्रश्नान् न पृच्छति ।
```
mkdir my-project && cd my-project
npm init -y
```
विटे स्थापित करें। अस्माकं Webpack मार्गदर्शिकायाः विपरीतम्, अत्र केवलं एकं निर्माणसाधननिर्भरता अस्ति । वयं --save-devसंकेतं दातुं उपयुञ्ज्महे यत् एषा आश्रयः केवलं विकासप्रयोगाय एव अस्ति न तु उत्पादनार्थम्।
```
npm i --save-dev vite
```
बूटस्ट्रैप् संस्थापयन्तु। अधुना वयं Bootstrap इत्येतत् संस्थापयितुं शक्नुमः । वयं Popper अपि संस्थापयिष्यामः यतः अस्माकं dropdowns, popovers, tooltips च तेषां स्थितिकरणार्थं तस्मिन् निर्भरं भवति । यदि भवान् तान् घटकान् उपयोक्तुं योजनां न करोति तर्हि अत्र Popper इत्येतत् परित्यक्तुं शक्नोति ।
```
npm i --save bootstrap @popperjs/core
```
अतिरिक्त निर्भरता स्थापित करें। Vite तथा Bootstrap इत्येतयोः अतिरिक्तं, Bootstrap इत्यस्य CSS इत्यस्य सम्यक् आयातं कृत्वा बण्डल् कर्तुं अस्माकं अन्यस्य dependency (Sass) इत्यस्य आवश्यकता अस्ति ।
```
npm i --save-dev sass
```

इदानीं यदा अस्माकं सर्वाणि आवश्यकानि निर्भरतानि संस्थापितानि सेटअप च सन्ति तदा वयं प्रोजेक्ट् सञ्चिकाः निर्माय Bootstrap इत्यस्य आयातं कृत्वा कार्यं कर्तुं शक्नुमः ।

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

वयं पूर्वमेव 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स्वस्य सम्पादके उद्घाटयन्तु । यतः एतत् रिक्तम् अस्ति, अस्माभिः तस्मिन् किञ्चित् boilerplate config योजयितुं आवश्यकता भविष्यति येन वयं अस्माकं सर्वरं आरभुं शक्नुमः । config इत्यस्य एषः भागः Vite इत्यस्मै कथयति यत् अस्माकं परियोजनायाः JavaScript अन्वेष्टुम् आसीत् तथा च विकाससर्वरः कथं व्यवहारः कर्तव्यः ( srchot reload इत्यनेन सह फोल्डर् तः आकर्षयन्) ।
```
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>
```
वयम् अत्र Bootstrap styling इत्यस्य किञ्चित् भागं च समाविष्टं कुर्मः div class="container"तथा च <button>येन वयं पश्यामः यत् Bootstrap इत्यस्य CSS Vite द्वारा कदा लोड् भवति।
अधुना Vite चालयितुं अस्माकं कृते npm स्क्रिप्ट् आवश्यकम् अस्ति । अधः दर्शितं स्क्रिप्ट् उद्घाट्य package.jsonयोजयन्तु start(भवतः पूर्वमेव परीक्षणलिपिः भवितुम् अर्हति) । वयं अस्माकं स्थानीयं Vite dev सर्वरं आरभ्यतुं एतां स्क्रिप्ट् उपयुञ्ज्महे ।
```
{
  // ...
  "scripts": {
    "start": "vite",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  // ...
}
```
अन्ते च, वयं विटे आरभुं शक्नुमः। स्वस्य टर्मिनल् मध्ये फ़ोल्डर् तः my-project, तत् नवीनं योजितं npm स्क्रिप्ट् चालयन्तु:
```
npm start
```

अस्य मार्गदर्शिकायाः अग्रिमे अन्तिमे च विभागे वयं Bootstrap इत्यस्य सर्वाणि CSS तथा JavaScript इत्येतत् आयातयिष्यामः ।

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

मध्ये Bootstrap इत्यस्य 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
  }
}
```
अधुना, Bootstrap इत्यस्य CSS इत्यस्य आयातं कुर्मः । src/scss/styles.scssBootstrap इत्यस्य सर्वान् स्रोतः Sass आयातयितुं निम्नलिखितम् to योजयन्तु ।
```
// Import all of Bootstrap's CSS
@import "~bootstrap/scss/bootstrap";
```
भवान् इच्छति चेत् अस्माकं शैलीपत्रिकाः व्यक्तिगतरूपेण अपि आयातयितुं शक्नोति । विस्तरेण ज्ञातुं अस्माकं Sass import docs पठन्तु ।
तदनन्तरं वयं CSS लोड् कृत्वा Bootstrap इत्यस्य JavaScript इम्पोर्ट् कुर्मः । src/js/main.jsCSS लोड् कर्तुं तथा Bootstrap इत्यस्य सर्वाणि JS आयातयितुं निम्नलिखितम् योजयन्तु । Bootstrap इत्यस्य माध्यमेन स्वयमेव Popper इत्यस्य आयातः भविष्यति ।
```
// 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';
```
Bootstrap इत्यस्य प्लगिन्स् कथं उपयोक्तव्यम् इति अधिकसूचनार्थं अस्माकं JavaScript docs पठन्तु ।
त्वं च कृतः ! 🎉 Bootstrap इत्यस्य स्रोतः Sass तथा JS पूर्णतया लोड् कृत्वा अधुना भवतः स्थानीयविकाससर्वरः एतादृशः भवेत्।

इदानीं भवान् यत्किमपि Bootstrap घटकं योजयितुं आरभुं शक्नोति यत् भवान् उपयोक्तुं इच्छति । अतिरिक्तं कस्टम् Sass कथं समाविष्टं कर्तव्यं तथा च केवलं Bootstrap इत्यस्य CSS तथा JS इत्यस्य भागान् आयात्य यत् भवतः आवश्यकता अस्ति तेषां कृते स्वस्य निर्माणस्य अनुकूलनं कथं करणीयम् इति कृते सम्पूर्णं Vite उदाहरणप्रकल्पं अवश्यं पश्यन्तु।

अत्र किमपि दोषं वा पुरातनं वा पश्यतु? कृपया GitHub इत्यत्र एकं मुद्दा उद्घाटयन्तु . समस्यानिवारणार्थं सहायता आवश्यकी अस्ति वा? GitHub इत्यत्र अन्वेषणं कुर्वन्तु अथवा चर्चां आरभत ।