బూట్‌స్ట్రాప్ & వైట్

Viteని ఉపయోగించి మీ ప్రాజెక్ట్‌లో బూట్‌స్ట్రాప్ CSS మరియు జావాస్క్రిప్ట్‌లను ఎలా చేర్చాలి మరియు బండిల్ చేయాలి అనే దాని గురించి అధికారిక గైడ్.

ఈ పేజీలో

చివరి వరకు దాటవేయాలనుకుంటున్నారా? twbs/examples repository నుండి ఈ గైడ్ కోసం సోర్స్ కోడ్ మరియు వర్కింగ్ డెమోని డౌన్‌లోడ్ చేయండి . మీరు ప్రత్యక్ష సవరణ కోసం StackBlitzలో ఉదాహరణను కూడా తెరవవచ్చు .

సెటప్

మేము మొదటి నుండి బూట్‌స్ట్రాప్‌తో Vite ప్రాజెక్ట్‌ను రూపొందిస్తున్నాము, కాబట్టి మేము నిజంగా ప్రారంభించడానికి ముందు కొన్ని ముందస్తు అవసరాలు మరియు ముందస్తు దశలు ఉన్నాయి. ఈ గైడ్‌కు మీరు Node.jsని ఇన్‌స్టాల్ చేసి, టెర్మినల్‌తో కొంత అవగాహన కలిగి ఉండాలి.

ప్రాజెక్ట్ ఫోల్డర్‌ను సృష్టించండి మరియు npmని సెటప్ చేయండి. మేము అన్ని ఇంటరాక్టివ్ ప్రశ్నలను అడగకుండా ఉండటానికి మేము my-projectఫోల్డర్‌ను సృష్టిస్తాము మరియు ఆర్గ్యుమెంట్‌తో npmని ప్రారంభిస్తాము .-y
```
mkdir my-project && cd my-project
npm init -y
```
Viteని ఇన్‌స్టాల్ చేయండి. మా వెబ్‌ప్యాక్ గైడ్ వలె కాకుండా, ఇక్కడ ఒకే బిల్డ్ టూల్ డిపెండెన్సీ మాత్రమే ఉంది. ఈ డిపెండెన్సీ కేవలం అభివృద్ధి వినియోగానికి --save-devమాత్రమేనని, ఉత్పత్తి కోసం కాదని మేము సూచిస్తాము.
```
npm i --save-dev vite
```
బూట్‌స్ట్రాప్‌ను ఇన్‌స్టాల్ చేయండి. ఇప్పుడు మనం బూట్‌స్ట్రాప్‌ను ఇన్‌స్టాల్ చేయవచ్చు. మా డ్రాప్‌డౌన్‌లు, పాప్‌ఓవర్‌లు మరియు టూల్‌టిప్‌లు వాటి స్థానాల కోసం దానిపై ఆధారపడి ఉంటాయి కాబట్టి మేము పాపర్‌ని కూడా ఇన్‌స్టాల్ చేస్తాము. మీరు ఆ భాగాలను ఉపయోగించాలని ప్లాన్ చేయకపోతే, మీరు ఇక్కడ పాప్పర్‌ను వదిలివేయవచ్చు.
```
npm i --save bootstrap @popperjs/core
```
అదనపు డిపెండెన్సీని ఇన్‌స్టాల్ చేయండి. వీట్ మరియు బూట్‌స్ట్రాప్‌తో పాటు, బూట్‌స్ట్రాప్ యొక్క CSSని సరిగ్గా దిగుమతి చేయడానికి మరియు బండిల్ చేయడానికి మాకు మరొక డిపెండెన్సీ (సాస్) అవసరం.
```
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ని కాన్ఫిగర్ చేయవచ్చు మరియు మా ప్రాజెక్ట్‌ను స్థానికంగా అమలు చేయవచ్చు.

vite.config.jsమీ ఎడిటర్‌లో తెరవండి . ఇది ఖాళీగా ఉన్నందున, మేము దీనికి కొంత బాయిలర్‌ప్లేట్ కాన్ఫిగరేషన్‌ను జోడించాలి, తద్వారా మేము మా సర్వర్‌ని ప్రారంభించవచ్చు. కాన్ఫిగరేషన్‌లోని ఈ భాగం Vite మా ప్రాజెక్ట్ యొక్క JavaScript కోసం వెతకాలని మరియు డెవలప్‌మెంట్ సర్వర్ ఎలా ప్రవర్తించాలి ( srcహాట్ రీలోడ్‌తో ఫోల్డర్ నుండి లాగడం) అని చెబుతుంది.
```
const path = require('path')

export default {
  root: path.resolve(__dirname, 'src'),
  server: {
    port: 8080,
    hot: true
  }
}
```
తరువాత మేము నింపుతాము src/index.html. బండిల్ చేయబడిన CSS మరియు JSని ఉపయోగించుకోవడానికి ఇది బ్రౌజర్‌లో Vite లోడ్ అయ్యే HTML పేజీ, మేము తదుపరి దశల్లో దీనికి జోడిస్తాము.
```
<!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>బూట్‌స్ట్రాప్ యొక్క CSS 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
```

ఈ గైడ్‌కి తదుపరి మరియు చివరి విభాగంలో, మేము బూట్‌స్ట్రాప్ యొక్క మొత్తం CSS మరియు జావాస్క్రిప్ట్‌లను దిగుమతి చేస్తాము.

బూట్స్ట్రాప్ దిగుమతి

లో బూట్‌స్ట్రాప్ యొక్క సాస్ దిగుమతిని సెటప్ చేయండి 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";
```
మీకు కావాలంటే మీరు మా స్టైల్‌షీట్‌లను వ్యక్తిగతంగా కూడా దిగుమతి చేసుకోవచ్చు. వివరాల కోసం మా సాస్ దిగుమతి డాక్స్ చదవండి .
తరువాత మేము CSSని లోడ్ చేస్తాము మరియు బూట్‌స్ట్రాప్ యొక్క జావాస్క్రిప్ట్‌ను దిగుమతి చేస్తాము. CSSని లోడ్ చేయడానికి క్రింది వాటిని జోడించండి మరియు src/js/main.jsబూట్‌స్ట్రాప్ యొక్క మొత్తం 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 పూర్తిగా లోడ్ చేయబడినప్పుడు, మీ స్థానిక అభివృద్ధి సర్వర్ ఇప్పుడు ఇలా ఉండాలి.

ఇప్పుడు మీరు ఉపయోగించాలనుకుంటున్న ఏవైనా బూట్‌స్ట్రాప్ భాగాలను జోడించడం ప్రారంభించవచ్చు. మీకు అవసరమైన బూట్‌స్ట్రాప్ యొక్క CSS మరియు JS భాగాలను మాత్రమే దిగుమతి చేసుకోవడం ద్వారా అదనపు కస్టమ్ సాస్ మరియు మీ బిల్డ్‌ని ఆప్టిమైజ్ చేయడం ఎలా అనేదానికి పూర్తి Vite ఉదాహరణ ప్రాజెక్ట్‌ను తనిఖీ చేయండి .

ఇక్కడ ఏదైనా తప్పు లేదా కాలం చెల్లినదా? దయచేసి GitHubలో ఒక సమస్యను తెరవండి . సమస్య పరిష్కారానికి సహాయం కావాలా? GitHubలో శోధించండి లేదా చర్చను ప్రారంభించండి .