هذا هو مونو ريبو . أنه يحتوي على عدة حزم ، وكلها يتم التحكم فيها من packages.json المستوى الأعلى. json.
يحتوي كل مشروع على ملف package.json يحتوي على تكوين محدد للحزمة ، ومع ذلك ، لا تقم بتشغيل yarn install من مشروع حزمة ؛ بدلاً من ذلك ، قم بتشغيله من المستوى العلوي.
إذا قمت بتشغيل yarn install من حزمة ، فيمكنك الحصول على خطأ غير مفيد مثل هذا:
Error: ENOENT: no such file or directory, symlink '…fozzie-componentspackages…' -> '…fozzie-componentsnode_modules@justeat…'
في حالة حدوث ذلك ، قم بحذف جميع مجلدات node_modules طوال الوقت ثم قم yarn install من دليل الجذر مرة أخرى.
في بعض الحالات النادرة package.json يمكن أن يفشل في بعض الأحيان في في بعض الأحيان حل / تثبيت / تثبيت بشكل صحيح. يمكن أن يؤدي ذلك إلى أخطاء مثل: خطأ مثال: لا يمكن العثور على الوحدة التالية ، يرجى تشغيل yarn add @moduleName لتثبيته.
هناك حلان يمكنك تجربتهما من جذر المشروع الذي قد يصلح هذا:
Turborepo هو نظام بناء ذكي مُحسّن لـ JavaScript و TypeScript. نستخدم Turborepo لتسهيل تنفيذ جميع البرامج النصية للبناء لدينا داخل Monorepo Pie.
من أجل تسريع تدفقات التنمية المحلية / سير عمل CI ، نستخدم وظائف التخزين المؤقت عن بعد في Turborepo لنشر القطع الأثرية إلى AWS S3. هذا يضمن أن الحزم المعدلة فقط تم تنفيذ مهام البناء الخاصة بهم.
من أجل الاستفادة من هذه الوظيفة ، يجب عليك تعيين متغير بيئة TURBO_TOKEN على جهازك المحلي. يرجى التواصل مع فريق نظام التصميم لقيمة هذا الرمز المميز.
بمجرد تمكينك ، سترى "تمكين التخزين المؤقت عن بُعد" عند تنفيذ مهمة عقدة الحزم.
يوصى بتشغيل المهام التالية في جذر monorepo لضمان تنفيذ المهام للمكونات المطلوبة:
build test lint
لمهام الاختبار الأخرى ، يمكنك تنفيذها بعدة طرق:
# Run Component tests for all components
# Note: Ensure Storybook is not running when running the following commands
cd ./fozzie-components
yarn storybook:build
yarn storybook:serve-static
yarn test-component:chromeأو
# Run Component tests for individual f-* package
# Note: Ensure Storybook is not running when running the following commands
cd ./fozzie-components
yarn storybook:build
yarn storybook:serve-static
# And in another window
yarn test-component:chrome --filter=@justeat/f-user-messageلقد أنشأنا العديد من مساعدي Mixin الاختيارية في Fozzie. إليك مثال على كيفية استخدامه:
ملاحظة: استيراد mixin الاختياري واستخدام @include في ملف common.scss من المكون الخاص بك لا يعمل إذا تم تمكين module النمطية على SFC الخاص بك.
< style lang="scss" module>
@include pageBanner () ;
</ style > يمكنك إضافة أنماط قابلة لإعادة الاستخدام إلى ملف common.scss . يمكن أن يكون هذا مفيدًا للمكونات التي تستخدم المكونات الفرعية وقد ترغب في مشاركة Mixins والوظائف والمتغيرات.
يأتي كل مكون مع ملف vue.config.js الذي يجعل ملف common.scss متاحًا تحت مساحة الاسم common مثل:
`@use "../assets/scss/common.scss";`
للوصول إلى أي شيء من الملف المشترك ، ببساطة بادئة القيمة مثل:
// Fake values used for demonstration
.someClass {
color: common.$fontColor;
line-height: common.line-height();
@include common.truncate();
}
يمكنك إزالة الحاجة إلى تسوية الأسماء باستخدام شيء مثل @use "../assets/scss/common.scss" as * ومع ذلك ، فإن استخدام مساحة الاسم يجعل من السهل فهم من أين تأتي القيمة.
لتشغيل Storybook أولاً ، يجب تشغيل ما يلي على المستوى الأعلى
yarn build لبناء حزم متطلبات لتشغيل القصة.
ثم قم بتشغيل yarn storybook:serve لبدء Storybook ، والذي سيتم فتحه على localhost:8080 .
بدلاً من ذلك ، يمكنك تشغيل yarn build:changed yarn storybook:serve-changed فقط لعرض المكون الذي تعمل عليه ، وكذلك أي من تبعياته / المعالين.
إذا كنت ترغب في عرض مكون واحد في Storybook أثناء التطوير ، فيمكنك القيام بذلك عن طريق فتح ملف Components *.stories.js في IDE وتشغيل Storybook - Run Currently Open Story File والتي يمكن العثور عليها في علامة التبويب Debug على اليسار. (هذا يعمل فقط مع VS Code).
هذا مفيد بشكل خاص لأنه يمنع خطأ حيث يسحب القصة في أوراق الأنماط الأخرى (انظر هنا).
نحن نستخدم Husky لإدارة خطافات GIT لدينا.
عند التزامك ، سيتم تشغيل البرامج النصية التالية كجزء من خطافنا قبل الالتزام.
إذا كنت ترغب في تخطي هذا الخطاف Husky ، فما عليك سوى إضافة الوسيطة --no-verify عند التزامك.
على سبيل المثال: git commit -m "Refactor f-button" --no-verify .
يمكن العثور على مزيد من المعلومات حول كيفية المساهمة في هذا الريبو في قسم وثائق القصص القصيرة لدينا
تم تأليف مكونات Fozzie في الأصل في Vue 2. لضمان عملها في تطبيق Vue 3 ، يرجى تشغيل Vue 3 في وضع التوافق.
