ಪಾರ್ಸೆಲ್
ಪಾರ್ಸೆಲ್ ಬಳಸಿಕೊಂಡು ನಿಮ್ಮ ಪ್ರಾಜೆಕ್ಟ್ನಲ್ಲಿ ಬೂಟ್ಸ್ಟ್ರ್ಯಾಪ್ ಅನ್ನು ಹೇಗೆ ಸೇರಿಸುವುದು ಎಂದು ತಿಳಿಯಿರಿ.
ಪಾರ್ಸೆಲ್ ಅನ್ನು ಸ್ಥಾಪಿಸಿ
ಪಾರ್ಸೆಲ್ ಬಂಡ್ಲರ್ ಅನ್ನು ಸ್ಥಾಪಿಸಿ .
ಬೂಟ್ಸ್ಟ್ರ್ಯಾಪ್ ಅನ್ನು ಸ್ಥಾಪಿಸಿ
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