قطعة

تعرف على كيفية تضمين Bootstrap في مشروعك باستخدام Parcel.

على هذه الصفحة

تثبيت 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

استيراد JavaScript

قم باستيراد جافا سكريبت 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 وتخصيصه وفقًا لاحتياجاتك ، استخدم الملفات المصدر كجزء من عملية تجميع مشروعك.

قم بإنشاء ملف خاص بك لاستيراد ملفات Sass الخاصة بـ Bootstrapscss/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"
}

قم بتشغيل البرنامج النصي

يمكن الوصول إلى تطبيقك على http://127.0.0.1:1234.

npm run dev

إنشاء ملفات التطبيق

الملفات التي تم إنشاؤها موجودة في build/المجلد.

npm run build