قطعة
تعرف على كيفية تضمين Bootstrap في مشروعك باستخدام Parcel.
تثبيت 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