ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ ಮತ್ತು ಪಾರ್ಸೆಲ್

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

ಈ ಪುಟದಲ್ಲಿ

ಕೊನೆಯವರೆಗೂ ಸ್ಕಿಪ್ ಮಾಡಲು ಬಯಸುವಿರಾ? ಈ ಮಾರ್ಗದರ್ಶಿಗಾಗಿ ಮೂಲ ಕೋಡ್ ಮತ್ತು ವರ್ಕಿಂಗ್ ಡೆಮೊವನ್ನು twbs/ಉದಾಹರಣೆಗಳ ರೆಪೊಸಿಟರಿಯಿಂದ ಡೌನ್‌ಲೋಡ್ ಮಾಡಿ . ನೀವು 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>
```
ನಾವು ಇಲ್ಲಿ ಸ್ವಲ್ಪ ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ ಸ್ಟೈಲಿಂಗ್ ಅನ್ನು ಸೇರಿಸುತ್ತಿದ್ದೇವೆ div class="container"ಮತ್ತು <button>ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್‌ನ CSS ಅನ್ನು ವೆಬ್‌ಪ್ಯಾಕ್‌ನಿಂದ ಲೋಡ್ ಮಾಡಿದಾಗ ನಾವು ನೋಡುತ್ತೇವೆ.

ನಾವು 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 ಮತ್ತು JavaScript ಅನ್ನು ಆಮದು ಮಾಡಿಕೊಳ್ಳುತ್ತೇವೆ.

ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ ಆಮದು ಮಾಡಿ

ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ ಅನ್ನು ಪಾರ್ಸೆಲ್‌ಗೆ ಆಮದು ಮಾಡಿಕೊಳ್ಳಲು ಎರಡು ಆಮದುಗಳ ಅಗತ್ಯವಿದೆ, ಒಂದು ನಮ್ಮ 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'
```
ಬಂಡಲ್ ಗಾತ್ರಗಳನ್ನು ಕಡಿಮೆ ಮಾಡಲು ಅಗತ್ಯವಿರುವಂತೆ ನೀವು ಪ್ರತ್ಯೇಕವಾಗಿ 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 ನ ಭಾಗಗಳನ್ನು ಮಾತ್ರ ಆಮದು ಮಾಡಿಕೊಳ್ಳುವ ಮೂಲಕ ನಿಮ್ಮ ಬಿಲ್ಡ್ ಅನ್ನು ಆಪ್ಟಿಮೈಜ್ ಮಾಡುವುದು ಹೇಗೆ ಎಂಬುದಕ್ಕೆ ಸಂಪೂರ್ಣ ಪಾರ್ಸೆಲ್ ಉದಾಹರಣೆ ಯೋಜನೆಯನ್ನು ಪರೀಕ್ಷಿಸಲು ಮರೆಯದಿರಿ .

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