رفتن به محتوای اصلی به پیمایش اسناد بروید
in English

بسته

یاد بگیرید که چگونه بوت استرپ را با استفاده از 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