परिवेष्ट
Parcel इत्यस्य उपयोगेन Bootstrap इत्येतत् स्वस्य परियोजनायां कथं समाविष्टं कर्तव्यमिति ज्ञातव्यम् ।
पार्सल स्थापित करें
पार्सल बण्डलर स्थापित करें .
बूटस्ट्रैप् संस्थापयन्तु
npm इत्यस्य उपयोगेन bootstrap इत्येतत् Node.js मॉड्यूल् इत्यस्य रूपेण संस्थापयन्तु ।
Bootstrap Popper इत्यस्य उपरि निर्भरं भवति , यत् 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
जावास्क्रिप्ट् आयातम्
स्वस्य एप्लिकेशनस्य प्रवेशबिन्दौ (प्रायः ) Bootstrap इत्यस्य 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 इत्यस्य आयातम्
Bootstrap इत्यस्य पूर्णक्षमतायाः उपयोगाय तथा च स्वस्य आवश्यकतानुसारं अनुकूलितुं, स्रोतसञ्चिकानां उपयोगं स्वस्य परियोजनायाः बण्डलिंग् प्रक्रियायाः भागरूपे�� कुर्वन्तु ।
Bootstrap इत्यस्य 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"
}
dev स्क्रिप्ट चलायें
भवतः एप् http://127.0.0.1:1234
.
npm run dev
एप्लिकेशन सञ्चिकाः निर्मायताम्
निर्मिताः सञ्चिकाः build/
पुटे सन्ति ।
npm run build