پارسل

پارسل کا استعمال کرتے ہوئے اپنے پروجیکٹ میں بوٹسٹریپ کو شامل کرنے کا طریقہ سیکھیں۔

اس صفحہ پر

پارسل انسٹال کریں۔

بوٹسٹریپ انسٹال کریں۔

npm کا استعمال کرتے ہوئے بوٹسٹریپ کو Node.js ماڈیول کے طور پر انسٹال کریں۔

بوٹسٹریپ کا انحصار 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

جاوا اسکرپٹ درآمد کرنا

بوٹسٹریپ کی جاوا اسکرپٹ کو اپنی ایپ کے انٹری پوائنٹ (عام طور پر ) میں درآمد کریں 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';

سی ایس ایس درآمد کرنا

بوٹسٹریپ کی پوری صلاحیت کو بروئے کار لانے اور اسے اپنی ضروریات کے مطابق بنانے کے لیے، اپنے پروجیکٹ کے بنڈلنگ کے عمل کے ایک حصے کے طور پر سورس فائلز کا استعمال کریں۔

بوٹسٹریپ کی 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