पार्सल

पार्सल वापरून तुमच्या प्रोजेक्टमध्ये बूटस्ट्रॅपचा समावेश कसा करायचा ते शिका.

या पृष्ठावर

पार्सल स्थापित करा

बूटस्ट्रॅप स्थापित करा

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 आयात करत आहे

तुमच्या अॅपच्या एंट्री पॉइंटमध्ये बूटस्ट्रॅपची 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 आयात करत आहे

बूटस्ट्रॅपची पूर्ण क्षमता वापरण्यासाठी आणि ती तुमच्या गरजेनुसार सानुकूलित करण्यासाठी, तुमच्या प्रकल्पाच्या बंडलिंग प्रक्रियेचा एक भाग म्हणून स्त्रोत फाइल्स वापरा.

बूटस्ट्रॅपच्या Sass फाइल्स आयात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

पार्सल