پارسل

سکو ته ڪيئن شامل ڪجي Bootstrap پنهنجي پروجيڪٽ ۾ پارسل استعمال ڪندي.

هن صفحي تي

پارسل انسٽال ڪريو

انسٽال ڪريو Bootstrap

npm استعمال ڪندي Bootstrap کي 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

جاوا اسڪرپٽ درآمد ڪرڻ

بوٽ اسٽريپ جي جاوا اسڪرپٽ کي درآمد ڪريو پنھنجي ايپ جي داخلا پوائنٽ ۾ (عام طور تي 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 جي 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