بسته
یاد بگیرید که چگونه بوت استرپ را با استفاده از Parcel در پروژه خود بگنجانید.
بسته را نصب کنید
Parcel Bundler را نصب کنید .
بوت استرپ را نصب کنید
بوت استرپ را به عنوان یک ماژول Node.js با استفاده از npm نصب کنید.
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 را در نقطه ورودی برنامه خود وارد کنید (معمولا ) 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 و سفارشی کردن آن بر اساس نیازهای خود، از فایل های منبع به عنوان بخشی از فرآیند بسته بندی پروژه خود استفاده کنید.
فایل های خود را scss/custom.scss
برای وارد کردن Sass Bootstrap ایجاد کنید و سپس متغیرهای سفارشی داخلی را لغو کنید .
ساخت اپلیکیشن
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