परिवेष्ट

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