پارسل
زده کړئ چې څنګه د پارسل په کارولو سره ستاسو په پروژه کې بوټسټریپ شامل کړئ.
پارسل نصب کړئ
د پارسل بنډلر نصب کړئ .
بوټسټریپ نصب کړئ
د 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
د جاوا سکریپټ واردول
د خپل اپلیکیشن د ننوتلو نقطه کې د بوټسټریپ جاواسکریپټ وارد کړئ (معمولا 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"
}
dev سکریپټ چلول
ستاسو اپلیکیشن به په کې د لاسرسي وړ وي http://127.0.0.1:1234
.
npm run dev
د اپلیکیشن فایلونه جوړ کړئ
جوړ شوي فایلونه په build/
فولډر کې دي.
npm run build