ಪಾರ್ಸೆಲ್

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

ಈ ಪುಟದಲ್ಲಿ

ಪಾರ್ಸೆಲ್ ಅನ್ನು ಸ್ಥಾಪಿಸಿ

ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ ಅನ್ನು ಸ್ಥಾಪಿಸಿ

npm ಬಳಸಿಕೊಂಡು Node.js ಮಾಡ್ಯೂಲ್ ಆಗಿ ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ ಅನ್ನು ಸ್ಥಾಪಿಸಿ .

ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ ಪಾಪ್ಪರ್ ಅನ್ನು ಅವಲಂಬಿಸಿರುತ್ತದೆ , ಇದನ್ನು peerDependenciesಆಸ್ತಿಯಲ್ಲಿ ನಿರ್ದಿಷ್ಟಪಡಿಸಲಾಗಿದೆ . ಇದರರ್ಥ ನಿಮ್ಮ ಬಳಕೆಗೆ ಇವೆರಡನ್ನೂ ಸೇರಿಸಲು ನೀವು package.jsonಖಚಿತಪಡಿಸಿಕೊಳ್ಳಬೇಕು npm install @popperjs/core.

ಎಲ್ಲವೂ ಪೂರ್ಣಗೊಂಡಾಗ, ನಿಮ್ಮ ಯೋಜನೆಯನ್ನು ಈ ರೀತಿ ರಚಿಸಲಾಗುತ್ತದೆ:

project-name/
├── build/
├── node_modules/
│   └── bootstrap/
│   └── popper.js/
├── scss/
│   └── custom.scss
├── src/
│   └── index.html
│   └── index.js
└── package.json

JavaScript ಅನ್ನು ಆಮದು ಮಾಡಲಾಗುತ್ತಿದೆ

ನಿಮ್ಮ ಅಪ್ಲಿಕೇಶನ್‌ನ ಪ್ರವೇಶ ಬಿಂದು (ಸಾಮಾನ್ಯವಾಗಿ ) ನಲ್ಲಿ ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್‌ನ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಅನ್ನು ಆಮದು ಮಾಡಿ. src/index.jsನಮ್ಮ ಎಲ್ಲಾ ಪ್ಲಗಿನ್‌ಗಳನ್ನು ನೀವು ಒಂದೇ ಫೈಲ್‌ನಲ್ಲಿ ಅಥವಾ ಪ್ರತ್ಯೇಕವಾಗಿ ಆಮದು ಮಾಡಿಕೊಳ್ಳಬಹುದು.

// Import all plugins
import * as bootstrap from 'bootstrap';

// Or import only needed plugins
import { Tooltip as Tooltip, Toast as Toast, Popover as Popover } from 'bootstrap';

// Or import just one
import Alert as Alert from '../node_modules/bootstrap/js/dist/alert';

CSS ಅನ್ನು ಆಮದು ಮಾಡಿಕೊಳ್ಳಲಾಗುತ್ತಿದೆ

ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್‌ನ ಸಂಪೂರ್ಣ ಸಾಮರ್ಥ್ಯವನ್ನು ಬಳಸಿಕೊಳ್ಳಲು ಮತ್ತು ಅದನ್ನು ನಿಮ್ಮ ಅಗತ್ಯಗಳಿಗೆ ಕಸ್ಟಮೈಸ್ ಮಾಡಲು, ನಿಮ್ಮ ಪ್ರಾಜೆಕ್ಟ್‌ನ ಬಂಡಲಿಂಗ್ ಪ್ರಕ್ರಿಯೆಯ ಭಾಗವಾಗಿ ಮೂಲ ಫೈಲ್‌ಗಳನ್ನು ಬಳಸಿ.

ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್‌ನ ಸಾಸ್ ಫೈಲ್‌ಗಳನ್ನು ಆಮದು ಮಾಡಿಕೊಳ್ಳಲುscss/custom.scss ನಿಮ್ಮದೇ ಆದದನ್ನು ರಚಿಸಿ ಮತ್ತು ನಂತರ ಅಂತರ್ನಿರ್ಮಿತ ಕಸ್ಟಮ್ ವೇರಿಯೇಬಲ್‌ಗಳನ್ನು ಅತಿಕ್ರಮಿಸಿ .

ಅಪ್ಲಿಕೇಶನ್ ಅನ್ನು ನಿರ್ಮಿಸಿ

src/index.jsಮುಚ್ಚುವ </body>ಟ್ಯಾಗ್ ಮೊದಲು ಸೇರಿಸಿ .

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>
  <body>
    <script src="./index.js"></script>
  </body>
</html>

ತಿದ್ದು`package.json`

ನಿಮ್ಮ ಫೈಲ್‌ನಲ್ಲಿ ಸೇರಿಸಿ devಮತ್ತು buildಸ್ಕ್ರಿಪ್ಟ್‌ಗಳನ್ನು ಸೇರಿಸಿ.package.json

"scripts": {
  "dev": "parcel ./src/index.html",
  "prebuild": "npx rimraf build",
  "build": "parcel build --public-url ./ ./src/index.html --experimental-scope-hoisting --out-dir build"
}

ದೇವ್ ಸ್ಕ್ರಿಪ್ಟ್ ಅನ್ನು ರನ್ ಮಾಡಿ

ನಿಮ್ಮ ಅಪ್ಲಿಕೇಶನ್ ಅನ್ನು ಇಲ್ಲಿ ಪ್ರವೇಶಿಸಬಹುದು http://127.0.0.1:1234.

npm run dev

ಅಪ್ಲಿಕೇಶನ್ ಫೈಲ್‌ಗಳನ್ನು ನಿರ್ಮಿಸಿ

ಬಿಲ್ಟ್ ಫೈಲ್‌ಗಳು build/ಫೋಲ್ಡರ್‌ನಲ್ಲಿವೆ.

npm run build

ಪಾರ್ಸೆಲ್