ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ ಮತ್ತು ವೈಟ್

Vite ಅನ್ನು ಬಳಸಿಕೊಂಡು ನಿಮ್ಮ ಪ್ರಾಜೆಕ್ಟ್‌ನಲ್ಲಿ ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್‌ನ CSS ಮತ್ತು ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಅನ್ನು ಹೇಗೆ ಸೇರಿಸುವುದು ಮತ್ತು ಬಂಡಲ್ ಮಾಡುವುದು ಎಂಬುದರ ಅಧಿಕೃತ ಮಾರ್ಗದರ್ಶಿ.

ಈ ಪುಟದಲ್ಲಿ

ಕೊನೆಯವರೆಗೂ ಸ್ಕಿಪ್ ಮಾಡಲು ಬಯಸುವಿರಾ? ಈ ಮಾರ್ಗದರ್ಶಿಗಾಗಿ ಮೂಲ ಕೋಡ್ ಮತ್ತು ವರ್ಕಿಂಗ್ ಡೆಮೊವನ್ನು twbs/ಉದಾಹರಣೆಗಳ ರೆಪೊಸಿಟರಿಯಿಂದ ಡೌನ್‌ಲೋಡ್ ಮಾಡಿ . ಲೈವ್ ಸಂಪಾದನೆಗಾಗಿ ನೀವು 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
```
ಹೆಚ್ಚುವರಿ ಅವಲಂಬನೆಯನ್ನು ಸ್ಥಾಪಿಸಿ. Vite ಮತ್ತು Bootstrap ಜೊತೆಗೆ, Bootstrap ನ CSS ಅನ್ನು ಸರಿಯಾಗಿ ಆಮದು ಮಾಡಿಕೊಳ್ಳಲು ಮತ್ತು ಬಂಡಲ್ ಮಾಡಲು ನಮಗೆ ಇನ್ನೊಂದು ಅವಲಂಬನೆ (Sass) ಅಗತ್ಯವಿದೆ.
```
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 ಕಾರ್ಯನಿರ್ವಹಿಸುವುದಿಲ್ಲ.

Vite ಅನ್ನು ಕಾನ್ಫಿಗರ್ ಮಾಡಿ

ಅವಲಂಬನೆಗಳನ್ನು ಸ್ಥಾಪಿಸಿ ಮತ್ತು ಕೋಡಿಂಗ್ ಪ್ರಾರಂಭಿಸಲು ನಮ್ಮ ಪ್ರಾಜೆಕ್ಟ್ ಫೋಲ್ಡರ್ ಸಿದ್ಧವಾಗಿದೆ, ನಾವು ಈಗ Vite ಅನ್ನು ಕಾನ್ಫಿಗರ್ ಮಾಡಬಹುದು ಮತ್ತು ನಮ್ಮ ಪ್ರಾಜೆಕ್ಟ್ ಅನ್ನು ಸ್ಥಳೀಯವಾಗಿ ರನ್ ಮಾಡಬಹುದು.

vite.config.jsನಿಮ್ಮ ಸಂಪಾದಕದಲ್ಲಿ ತೆರೆಯಿರಿ . ಇದು ಖಾಲಿಯಾಗಿರುವುದರಿಂದ, ನಾವು ಅದಕ್ಕೆ ಕೆಲವು ಬಾಯ್ಲರ್‌ಪ್ಲೇಟ್ ಕಾನ್ಫಿಗರ್ ಅನ್ನು ಸೇರಿಸುವ ಅಗತ್ಯವಿದೆ ಆದ್ದರಿಂದ ನಾವು ನಮ್ಮ ಸರ್ವರ್ ಅನ್ನು ಪ್ರಾರಂಭಿಸಬಹುದು. ನಮ್ಮ ಪ್ರಾಜೆಕ್ಟ್‌ನ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಮತ್ತು ಡೆವಲಪ್‌ಮೆಂಟ್ ಸರ್ವರ್ ಹೇಗೆ ವರ್ತಿಸಬೇಕು ( srcಹಾಟ್ ರೀಲೋಡ್‌ನೊಂದಿಗೆ ಫೋಲ್ಡರ್‌ನಿಂದ ಎಳೆಯುವುದು) ಅನ್ನು ನೋಡಲು Vite ಅನ್ನು ಕಾನ್ಫಿಗರ್‌ನ ಈ ಭಾಗವು ಹೇಳುತ್ತದೆ.
```
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 ಮತ್ತು 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ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್‌ನ ಎಲ್ಲಾ ಮೂಲ 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'
```
ಬಂಡಲ್ ಗಾತ್ರಗಳನ್ನು ಕಡಿಮೆ ಮಾಡಲು ಅಗತ್ಯವಿರುವಂತೆ ನೀವು ಪ್ರತ್ಯೇಕವಾಗಿ JavaScript ಪ್ಲಗಿನ್‌ಗಳನ್ನು ಆಮದು ಮಾಡಿಕೊಳ್ಳಬಹುದು:
```
import Alert from 'bootstrap/js/dist/alert';

// or, specify which plugins you need:
import { Tooltip, Toast, Popover } from 'bootstrap';
```
ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್‌ನ ಪ್ಲಗಿನ್‌ಗಳನ್ನು ಹೇಗೆ ಬಳಸುವುದು ಎಂಬುದರ ಕುರಿತು ಹೆಚ್ಚಿನ ಮಾಹಿತಿಗಾಗಿ ನಮ್ಮ JavaScript ಡಾಕ್ಸ್ ಅನ್ನು ಓದಿ .
ಮತ್ತು ನೀವು ಮುಗಿಸಿದ್ದೀರಿ! 🎉 ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್‌ನ ಮೂಲ Sass ಮತ್ತು JS ಸಂಪೂರ್ಣವಾಗಿ ಲೋಡ್ ಆಗಿದ್ದರೆ, ನಿಮ್ಮ ಸ್ಥಳೀಯ ಅಭಿವೃದ್ಧಿ ಸರ್ವರ್ ಈಗ ಈ ರೀತಿ ಕಾಣುತ್ತದೆ.

ಈಗ ನೀವು ಬಳಸಲು ಬಯಸುವ ಯಾವುದೇ ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ ಘಟಕಗಳನ್ನು ಸೇರಿಸಲು ಪ್ರಾರಂಭಿಸಬಹುದು. ಹೆಚ್ಚುವರಿ ಕಸ್ಟಮ್ ಸಾಸ್ ಅನ್ನು ಹೇಗೆ ಸೇರಿಸುವುದು ಮತ್ತು ನಿಮಗೆ ಅಗತ್ಯವಿರುವ ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್‌ನ CSS ಮತ್ತು JS ನ ಭಾಗಗಳನ್ನು ಮಾತ್ರ ಆಮದು ಮಾಡಿಕೊಳ್ಳುವ ಮೂಲಕ ನಿಮ್ಮ ಬಿಲ್ಡ್ ಅನ್ನು ಆಪ್ಟಿಮೈಜ್ ಮಾಡುವುದು ಹೇಗೆ ಎಂಬುದಕ್ಕೆ ಸಂಪೂರ್ಣ Vite ಉದಾಹರಣೆ ಯೋಜನೆಯನ್ನು ಪರೀಕ್ಷಿಸಲು ಮರೆಯದಿರಿ .

ಇಲ್ಲಿ ಏನಾದರೂ ತಪ್ಪಾಗಿದೆ ಅಥವಾ ಅವಧಿ ಮೀರಿದೆಯೇ? ದಯವಿಟ್ಟು GitHub ನಲ್ಲಿ ಸಮಸ್ಯೆಯನ್ನು ತೆರೆಯಿರಿ . ದೋಷನಿವಾರಣೆಗೆ ಸಹಾಯ ಬೇಕೇ? GitHub ನಲ್ಲಿ ಹುಡುಕಿ ಅಥವಾ ಚರ್ಚೆಯನ್ನು ಪ್ರಾರಂಭಿಸಿ .