ବୁଟଷ୍ଟ୍ରାପ୍ ଏବଂ ଭିଟ୍ |

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

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

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

ସେଟଅପ୍ |

ଆମେ ଆରମ୍ଭରୁ ବୁଟଷ୍ଟ୍ରାପ୍ ସହିତ ଏକ ଭିଟ୍ ପ୍ରୋଜେକ୍ଟ ନିର୍ମାଣ କରୁଛୁ, ତେଣୁ ପ୍ରକୃତରେ ଆରମ୍ଭ ହେବା ପୂର୍ବରୁ ସେଠାରେ କିଛି ପୂର୍ବ ସର୍ତ୍ତ ଏବଂ ଉପର ପଦକ୍ଷେପ ଅଛି | ଏହି ଗାଇଡ୍ ଆପଣଙ୍କୁ Node.js ସଂସ୍ଥାପିତ ଏବଂ ଟର୍ମିନାଲ୍ ସହିତ କିଛି ପରିଚିତ ହେବା ଆବଶ୍ୟକ କରେ |

ଏକ ପ୍ରୋଜେକ୍ଟ ଫୋଲ୍ଡର ଏବଂ ସେଟଅପ୍ npm ସୃଷ୍ଟି କରନ୍ତୁ | ଆମକୁ ସମସ୍ତ ଇଣ୍ଟରାକ୍ଟିଭ୍ ପ୍ରଶ୍ନ ପଚାରିବାକୁ ଏଡ଼ାଇବା ପାଇଁ ଆମେ my-projectଫୋଲ୍ଡର୍ ସୃଷ୍ଟି କରିବା ଏବଂ ଯୁକ୍ତି ସହିତ npm ଆରମ୍ଭ କରିବା |-y
```
mkdir my-project && cd my-project
npm init -y
```
ଭିଟ୍ ସଂସ୍ଥାପନ କରନ୍ତୁ | ଆମର ୱେବପ୍ୟାକ୍ ଗାଇଡ୍ ପରି, ଏଠାରେ କେବଳ ଗୋଟିଏ ବିଲ୍ଡ ଟୁଲ୍ ନିର୍ଭରଶୀଳତା ଅଛି | ଆମେ --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.config.jsଏପର୍ଯ୍ୟନ୍ତ ପୂରଣ କରିନାହୁଁ |

ଭିଟ୍ ବିନ୍ୟାସ କରନ୍ତୁ |

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

vite.config.jsତୁମର ଏଡିଟର୍ ରେ ଖୋଲ | ଯେହେତୁ ଏହା ଖାଲି ଅଛି, ଆମକୁ ଏଥିରେ କିଛି ବଏଲେପ୍ଲେଟ୍ ବିନ୍ୟାସ ଯୋଡିବାକୁ ପଡିବ ଯାହା ଦ୍ we ାରା ଆମେ ଆମର ସର୍ଭର ଆରମ୍ଭ କରିପାରିବା | କନଫିଗ୍ ର ଏହି ଅଂଶ Vite କୁ କହିଥାଏ ଯେ ଆମର ପ୍ରୋଜେକ୍ଟର ଜାଭାସ୍କ୍ରିପ୍ଟ ଏବଂ ବିକାଶ ସର୍ଭର କିପରି ବ୍ୟବହାର କରିବା ଉଚିତ ( srcଗରମ ପୁନ o ଲୋଡ୍ ସହିତ ଫୋଲ୍ଡରରୁ ଟାଣିବା) |
```
const path = require('path')

export default {
  root: path.resolve(__dirname, 'src'),
  server: {
    port: 8080,
    hot: true
  }
}
```
ପରବର୍ତ୍ତୀ ସମୟରେ ଆମେ ପୁରଣ କରିବା src/index.html| ଏହା ହେଉଛି HTML ପୃଷ୍ଠା ଭିଟ୍ ବ୍ରାଉଣ୍ଡରରେ 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>ଯାହାଫଳରେ ଯେତେବେଳେ ବୁଟ୍ ଷ୍ଟ୍ରାପ୍ ର CSS ଭିଟ୍ ଦ୍ୱାରା ଲୋଡ୍ ହୁଏ ଦେଖିବା |
ବର୍ତ୍ତମାନ 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 ଏବଂ JavaScript ଆମଦାନି କରିବୁ |

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

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

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

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