బూట్స్ట్రాప్ & పార్శిల్

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

ఈ పేజీలో

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

సెటప్

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

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

ఇప్పుడు మనకు అవసరమైన అన్ని డిపెండెన్సీలు ఇన్‌స్టాల్ చేయబడి ఉన్నాయి, మేము ప్రాజెక్ట్ ఫైల్‌లను సృష్టించడం మరియు బూట్‌స్ట్రాప్‌ను దిగుమతి చేయడం వంటివి చేయవచ్చు.

ప్రాజెక్ట్ నిర్మాణం

మేము ఇప్పటికే my-projectఫోల్డర్‌ను సృష్టించాము మరియు npmని ప్రారంభించాము. ఇప్పుడు మేము srcప్రాజెక్ట్ నిర్మాణాన్ని పూర్తి చేయడానికి మా ఫోల్డర్, స్టైల్‌షీట్ మరియు జావాస్క్రిప్ట్ ఫైల్‌ను కూడా సృష్టిస్తాము. నుండి క్రింది వాటిని అమలు చేయండి my-projectలేదా క్రింద చూపిన ఫోల్డర్ మరియు ఫైల్ నిర్మాణాన్ని మాన్యువల్‌గా సృష్టించండి.

mkdir {src,src/js,src/scss}
touch src/index.html src/js/main.js src/scss/styles.scss

మీరు పూర్తి చేసినప్పుడు, మీ పూర్తి ప్రాజెక్ట్ ఇలా ఉండాలి:

my-project/
├── src/
│   ├── js/
│   │   └── main.js
│   ├── scss/
│   │   └── styles.scss
│   └── index.html
├── package-lock.json
└── package.json

ఈ సమయంలో, ప్రతిదీ సరైన స్థలంలో ఉంది, కానీ మా సర్వర్‌ని ప్రారంభించడానికి పార్సెల్‌కి HTML పేజీ మరియు npm స్క్రిప్ట్ అవసరం.

పార్శిల్ కాన్ఫిగర్ చేయండి

డిపెండెన్సీలు ఇన్‌స్టాల్ చేయబడి మరియు కోడింగ్ ప్రారంభించడానికి మా ప్రాజెక్ట్ ఫోల్డర్ సిద్ధంగా ఉన్నందున, మేము ఇప్పుడు పార్సెల్‌ని కాన్ఫిగర్ చేయవచ్చు మరియు మా ప్రాజెక్ట్‌ను స్థానికంగా అమలు చేయవచ్చు. పార్సెల్‌కు డిజైన్ ద్వారా కాన్ఫిగరేషన్ ఫైల్ అవసరం లేదు, కానీ మా సర్వర్‌ను ప్రారంభించడానికి మాకు npm స్క్రిప్ట్ మరియు HTML ఫైల్ అవసరం.

src/index.htmlఫైల్‌ను పూరించండి . పార్సెల్‌కి రెండర్ చేయడానికి పేజీ అవసరం, కాబట్టి మేము index.htmlమా CSS మరియు JavaScript ఫైల్‌లతో సహా కొన్ని ప్రాథమిక HTMLని సెటప్ చేయడానికి మా పేజీని ఉపయోగిస్తాము.
```
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap w/ Parcel</title>
    <link rel="stylesheet" href="scss/styles.scss">
    <script type="module" src="js/main.js"></script>
  </head>
  <body>
    <div class="container py-4 px-3 mx-auto">
      <h1>Hello, Bootstrap and Parcel!</h1>
      <button class="btn btn-primary">Primary button</button>
    </div>
  </body>
</html>
```
Webpack ద్వారా బూట్‌స్ట్రాప్ CSS ఎప్పుడు లోడ్ అవుతుందో చూడడానికి మేము div class="container"ఇక్కడ బూట్‌స్ట్రాప్ స్టైలింగ్‌ను కొద్దిగా చేర్చాము.<button>

మేము Sassని ఉపయోగిస్తున్నామని పార్సెల్ స్వయంచాలకంగా గుర్తిస్తుంది మరియు దానికి మద్దతు ఇవ్వడానికి Sass పార్సెల్ ప్లగిన్‌ని ఇన్‌స్టాల్ చేస్తుంది. అయితే, మీరు కోరుకుంటే, మీరు మాన్యువల్‌గా కూడా అమలు చేయవచ్చు npm i --save-dev @parcel/transformer-sass.
పార్సెల్ npm స్క్రిప్ట్‌లను జోడించండి. ఆబ్జెక్ట్‌కు package.jsonకింది startస్క్రిప్ట్‌ని తెరిచి జోడించండి. scriptsమేము మా పార్సెల్ డెవలప్‌మెంట్ సర్వర్‌ని ప్రారంభించడానికి ఈ స్క్రిప్ట్‌ని ఉపయోగిస్తాము మరియు distడైరెక్టరీలో కంపైల్ చేసిన తర్వాత మేము సృష్టించిన HTML ఫైల్‌ను రెండర్ చేస్తాము.
```
{
   // ...
   "scripts": {
     "start": "parcel serve src/index.html --public-url / --dist-dir dist",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   // ...
}
```
చివరకు, మేము పార్సెల్ ప్రారంభించవచ్చు. మీ టెర్మినల్‌లోని ఫోల్డర్ నుండి, my-projectకొత్తగా జోడించిన npm స్క్రిప్ట్‌ని అమలు చేయండి:
```
npm start
```

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

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

బూట్‌స్ట్రాప్‌ను పార్శిల్‌లోకి దిగుమతి చేయడానికి రెండు దిగుమతులు అవసరం, ఒకటి మాలోకి styles.scssమరియు ఒకటి మా main.js.

బూట్‌స్ట్రాప్ యొక్క CSSని దిగుమతి చేయండి. src/scss/styles.scssబూట్‌స్ట్రాప్ యొక్క మూలం Sass మొత్తాన్ని దిగుమతి చేయడానికి క్రింది వాటిని జోడించండి .
```
// Import all of Bootstrap's CSS
@import "~bootstrap/scss/bootstrap";
```
మీకు కావాలంటే మీరు మా స్టైల్‌షీట్‌లను వ్యక్తిగతంగా కూడా దిగుమతి చేసుకోవచ్చు. వివరాల కోసం మా సాస్ దిగుమతి డాక్స్ చదవండి .
బూట్‌స్ట్రాప్ JSని దిగుమతి చేయండి. src/js/main.jsబూట్‌స్ట్రాప్ యొక్క మొత్తం JSని దిగుమతి చేయడానికి క్రింది వాటిని జోడించండి . బూట్‌స్ట్రాప్ ద్వారా పాపర్ స్వయంచాలకంగా దిగుమతి చేయబడుతుంది.
```
// 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 భాగాలను మాత్రమే దిగుమతి చేసుకోవడం ద్వారా అదనపు కస్టమ్ సాస్ మరియు మీ బిల్డ్‌ను ఎలా ఆప్టిమైజ్ చేయాలనే దాని కోసం పూర్తి పార్సెల్ ఉదాహరణ ప్రాజెక్ట్‌ను తనిఖీ చేయండి .

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