ବୁଟଷ୍ଟ୍ରାପ୍ ଏବଂ ପାର୍ସଲ୍ |

ପାର୍ସଲ୍ ବ୍ୟବହାର କରି ବୁଟ୍ ଷ୍ଟ୍ରାପ୍ ର CSS ଏବଂ ଜାଭାସ୍କ୍ରିପ୍ଟକୁ କିପରି ଅନ୍ତର୍ଭୂକ୍ତ ଏବଂ ବଣ୍ଡଲ୍ କରିବେ ସେଥିପାଇଁ ଅଫିସିଆଲ୍ ଗାଇଡ୍ |

ଏହି ପୃଷ୍ଠାରେ |

ଶେଷକୁ ଯିବାକୁ ଚାହୁଁଛନ୍ତି କି? Twbs / ଉଦାହରଣ ସଂଗ୍ରହାଳୟରୁ ଏହି ଗାଇଡ୍ ପାଇଁ ଉତ୍ସ କୋଡ୍ ଏବଂ ୱାର୍କିଂ ଡେମୋ ଡାଉନଲୋଡ୍ କରନ୍ତୁ | ଆପଣ ଷ୍ଟାକବ୍ଲିଜ୍ ରେ ଉଦାହରଣ ମଧ୍ୟ ଖୋଲିପାରିବେ କିନ୍ତୁ ଏହାକୁ ଚଲାଇ ପାରିବେ ନାହିଁ କାରଣ ପାର୍ସଲ୍ ବର୍ତ୍ତମାନ ସେଠାରେ ସମର୍ଥିତ ନୁହେଁ |

ସେଟଅପ୍ |

ଆମେ ବୁଟ୍ ଷ୍ଟ୍ରାପ୍ ସହିତ ଆରମ୍ଭରୁ ଏକ ପାର୍ସଲ୍ ପ୍ରୋଜେକ୍ଟ ନିର୍ମାଣ କରୁଛୁ, ତେଣୁ ପ୍ରକୃତରେ ଆରମ୍ଭ ହେବା ପୂର୍ବରୁ ସେଠାରେ କିଛି ପୂର୍ବ ସର୍ତ୍ତ ଏବଂ ଉପର ପଦକ୍ଷେପ ଅଛି | ଏହି ଗାଇଡ୍ ଆପଣଙ୍କୁ 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 ସ୍କ୍ରିପ୍ଟ ଆବଶ୍ୟକ କରେ |

ପାର୍ସଲ୍ ବିନ୍ୟାସ କରନ୍ତୁ |

ନିର୍ଭରଶୀଳତା ସଂସ୍ଥାପିତ ଏବଂ କୋଡିଂ ଆରମ୍ଭ କରିବା ପାଇଁ ଆମ ପ୍ରୋଜେକ୍ଟ ଫୋଲ୍ଡର ସହିତ, ଆମେ ବର୍ତ୍ତମାନ ପାର୍ସଲକୁ ବିନ୍ୟାସ କରିପାରିବା ଏବଂ ସ୍ଥାନୀୟ ଭାବରେ ଆମର ପ୍ରୋଜେକ୍ଟ ଚଲାଇ ପାରିବା | ଡିଜାଇନ୍ ଦ୍ୱାରା ପାର୍ସଲ୍ ନିଜେ କ config ଣସି ବିନ୍ୟାସ ଫାଇଲ୍ ଆବଶ୍ୟକ କରେ ନାହିଁ, କିନ୍ତୁ ଆମର ସର୍ଭର ଆରମ୍ଭ କରିବା ପାଇଁ ଆମକୁ ଏକ npm ସ୍କ୍ରିପ୍ଟ ଏବଂ HTML ଫାଇଲ୍ ଦରକାର |

src/index.htmlଫାଇଲ୍ ପୁରଣ କରନ୍ତୁ | index.htmlପାର୍ସଲ୍ ରେଣ୍ଡର୍ କରିବାକୁ ଏକ ପୃଷ୍ଠା ଆବଶ୍ୟକ କରେ, ତେଣୁ ଆମର CSS ଏବଂ ଜାଭାସ୍କ୍ରିପ୍ଟ ଫାଇଲ୍ ଅନ୍ତର୍ଭୂକ୍ତ କରି କିଛି ମ basic ଳିକ 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>
```
ଆମେ ଏଠାରେ ଟିକେ ବୁଟଷ୍ଟ୍ରାପ୍ ଷ୍ଟାଇଲିଂ ଅନ୍ତର୍ଭୂକ୍ତ କରୁଛୁ div class="container"ଏବଂ <button>ଯାହାଫଳରେ ଯେତେବେଳେ ବୁଟଷ୍ଟ୍ରାପ୍ ର CSS ୱେବ୍ ପ୍ୟାକ୍ ଦ୍ୱାରା ଲୋଡ୍ ହୁଏ ଦେଖିବା |

ପାର୍ସଲ୍ ସ୍ୱୟଂଚାଳିତ ଭାବରେ ଚିହ୍ନଟ କରିବ ଯେ ଆମେ ସାସ୍ ବ୍ୟବହାର କରୁଛୁ ଏବଂ ଏହାକୁ ସମର୍ଥନ କରିବାକୁ ସାସ୍ ପାର୍ସଲ୍ ପ୍ଲଗଇନ୍ ସଂସ୍ଥାପନ କରିବୁ | ତଥାପି, ଯଦି ଆପଣ ଚାହାଁନ୍ତି, ଆପଣ ମଧ୍ୟ ମାନୁଆଲ ଚଲାଇପାରିବେ 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 ଏବଂ JavaScript ଆମଦାନି କରିବୁ |

ବୁଟଷ୍ଟ୍ରାପ୍ ଆମଦାନୀ କରନ୍ତୁ |

ପାର୍ସଲରେ ବୁଟଷ୍ଟ୍ରାପ୍ ଆମଦାନୀ କରିବା ପାଇଁ ଦୁଇଟି ଆମଦାନୀ ଆବଶ୍ୟକ, ଗୋଟିଏ ଆମ ଭିତରେ styles.scssଏବଂ ଗୋଟିଏ ଆମ ଭିତରେ main.js|

ବୁଟଷ୍ଟ୍ରାପ୍ ର CSS ଆମଦାନି କରନ୍ତୁ | src/scss/styles.scssସମସ୍ତ ବୁଟଷ୍ଟ୍ରାପ୍ ର ଉତ୍ସ ସାସ୍ ଆମଦାନୀ କରିବାକୁ ନିମ୍ନକୁ ଯୋଡନ୍ତୁ |
```
// Import all of Bootstrap's CSS
@import "~bootstrap/scss/bootstrap";
```
ଆପଣ ଚାହିଁଲେ ଆପଣ ବ୍ୟକ୍ତିଗତ ଭାବରେ ଆମର ଷ୍ଟାଇଲ୍ ଶୀଟ୍ ଆମଦାନି କରିପାରିବେ | ବିବରଣୀ ପାଇଁ ଆମର ସାସ୍ ଆମଦାନୀ ଡକସ୍ ପ Read ନ୍ତୁ |
ବୁଟଷ୍ଟ୍ରାପ୍ ର 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'
```
ବୁଟଷ୍ଟ୍ରାପ୍ ର ପ୍ଲଗଇନ୍ କିପରି ବ୍ୟବହାର କରାଯିବ ସେ ସମ୍ବନ୍ଧରେ ଅଧିକ ସୂଚନା ପାଇଁ ଆମର ଜାଭାସ୍କ୍ରିପ୍ଟ ଡକସ୍ ପ Read ନ୍ତୁ |
ଏବଂ ତୁମେ ସମାପ୍ତ! Bo ବୁଟଷ୍ଟ୍ରାପ୍ ର ଉତ୍ସ ସାସ୍ ଏବଂ JS ସଂପୂର୍ଣ୍ଣ ଲୋଡ୍ ହେବା ସହିତ, ଆପଣଙ୍କର ସ୍ଥାନୀୟ ବିକାଶ ସର୍ଭର ବର୍ତ୍ତମାନ ଏହିପରି ଦେଖାଯିବା ଉଚିତ |

ବର୍ତ୍ତମାନ ଆପଣ ବ୍ୟବହାର କରିବାକୁ ଚାହୁଁଥିବା ଯେକ any ଣସି ବୁଟଷ୍ଟ୍ରାପ୍ ଉପାଦାନ ଯୋଗ କରିବା ଆରମ୍ଭ କରିପାରିବେ | ଅତିରିକ୍ତ କଷ୍ଟମ୍ ସାସ୍ କିପରି ଅନ୍ତର୍ଭୂକ୍ତ କରାଯିବ ଏବଂ କେବଳ ବୁଟଷ୍ଟ୍ରାପ୍ ର CSS ଏବଂ JS ର ଅଂଶ ଆମଦାନି କରି ଆପଣଙ୍କର ବିଲ୍ଡକୁ ଅପ୍ଟିମାଇଜ୍ କରିବା ପାଇଁ ସମ୍ପୂର୍ଣ୍ଣ ପାର୍ସଲ୍ ଉଦାହରଣ ପ୍ରୋଜେକ୍ଟ ଯାଞ୍ଚ କରିବାକୁ ନିଶ୍ଚିତ ହୁଅନ୍ତୁ |

ଏଠାରେ କିଛି ଭୁଲ୍ କିମ୍ବା ପୁରୁଣା ଦେଖନ୍ତୁ? ଦୟାକରି GitHub ରେ ଏକ ସମସ୍ୟା ଖୋଲନ୍ତୁ | ତ୍ରୁଟି ନିବାରଣ ପାଇଁ ସାହାଯ୍ୟ ଆବଶ୍ୟକ କରନ୍ତି କି? GitHub ରେ ସନ୍ଧାନ କିମ୍ବା ଆଲୋଚନା ଆରମ୍ଭ କର |