پارو

فێربە چۆن Bootstrap لە پرۆژەکەتدا دابنێیت بە بەکارهێنانی Parcel.

لەم پەیجەدا

دانانی پارسێل

Bootstrap دابمەزرێنە

bootstrap وەک مۆدیولێکی 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