berryjam
0.1.0-alpha.64
القضايا - انضم إلى Discord - ترخيص - Berryjam Cloud
متاح لـ: Vue.js (3.x) ، Nuxt (3.x)
يوفر Berryjam طريقة بسيطة لتحديد استخدام المكون الخاص بك والدعائم وعلاقاتها. استنادًا إلى الإخراج من الفحص الخاص بك ، يمكنك إنشاء لوحة القيادة الخاصة بك وتشغيل التحليل عبر مكونات مشروعك لتحسين الاتصالات عبر فريق التطوير الخاص بك.
1. مسح مشروعك للمكونات  | 2. تحليل المكونات وعلاقاتهم  |
3. مسح GIT سجل للمؤلف و DATETIME  | 4. اكتشف الدعائم تلقائيًا لكل مكون  |
Berryjam غير متوافق مع إصدارات Vue 2 أو أقل.
تم اختبار Berryjam بالكامل للعمل مع إصدار العقدة من 16.0 إلى 18.17.1 (LTS) . يجب أن تعمل الإصدارات أعلاه 18.17.1 (LTS) أيضًا ولكن لم يتم اختبارها بالكامل.
هناك بعض الطرق التي يمكنك من خلالها تثبيت Berryjam ، وهي NPM و PNPM والغزل. إذا قمت بالتثبيت عبر NPM ، فإليك CMD واحد لتثبيت هذه المكتبة
npm install berryjam pnpm add berryjam yarn add berryjam لبدء مسح مشروعك ، ستحتاج أولاً إلى استيراد فئة VueScanner وإنشاء مثيله.
import { homedir } from 'os' ;
import VueScanner from "berryjam"
import type { VueScannerOption , ComponentProfile } from "berryjam"
...
const pathToScan = '../your-vue-project-path' ;
const option : VueScannerOption = {
// this folder will be used to store the exact versions of babel & vue compiler
appDir : ` ${ homedir ( ) } /.vueScanner` ,
// ... any other options
}
// Create a new VueScanner instance with the required parameters
const vueScanner = new VueScanner ( pathToScan , option ) ;
...
// To start scanning without async/await
vueScanner . scan ( ) . then ( result => {
// the result will be an array of ComponentProfile
// log to see the result
console . log ( result ) ;
} )
// or, You can use async/await
async function whatEverFunction ( ) {
const result = await vueScanner . scan ( ) ;
} ملاحظة: بالنسبة لمشروع NUXT ، يرجى التأكد من أن لديك مجلد .nuxt قبل المسح.
تأخذ وظيفة VueScanner معلمتين على النحو التالي:
VueScannerOption . فيما يلي الوصف التفصيلي لكل خيار متاح داخل واجهة VueScannerOption :
| ملكية | يكتب | وصف |
|---|---|---|
appDir | string | مسار دليل المشروع ليتم فحصه. |
output | OutputFormat (اختياري) | تنسيق الإخراج المطلوب للنتيجة الممسوحة ضوئيًا. (JSON بشكل افتراضي) |
ignore | string[] (اختياري) | مجموعة من أسماء الملفات أو أسماء الدليل لاستبعادها من المسح. |
verbose | boolean (اختيارية) | تمكين وضع المطالبة للحصول على معلومات مسح أكثر تفصيلاً. |
debug | boolean (اختيارية) | قم بتشغيل الماسح الضوئي في وضع التصحيح ، مما يوفر معلومات تصحيح الأخطاء. |
يمثل نوع OutputFormat تنسيقات الإخراج المتاحة.
| يكتب | وصف |
|---|---|
"json" | إخراج النتيجة الممسوحة ضوئيا في تنسيق JSON وحفظها كـ "مكون profiles.json" داخل "Appdir". |
"stdout" | عرض النتيجة الممسوحة ضوئيا مباشرة في وحدة التحكم (stdout). |
توفر هذه الخيارات والأنواع المرونة والتخصيص عند استخدام وظيفة VueScanner لتحليل مشاريع Vue.js.
لمزيد من التفاصيل حول فئة VueScanner ، يرجى مراجعة أدناه.
من خلال استدعاء طريقة scan ، سيتم مسح مكونات VUE وإرجاع ComponentProfile[] . إليك مثال على كيفية ظهوره. لأغراض التوضيح ، قمنا بمسح مشروع مفتوح المصدر يسمى Koel.
[
{
"name" : " PlaybackControls " ,
"type" : " internal " ,
"total" : 1 ,
"source" : {
"path" : " /resources/assets/js/components/layout/app-footer/FooterPlaybackControls.vue " ,
"property" : {
"dataLastModified" : " Sun Feb 04 2018 " ,
"lastModified" : " Sun Feb 04 2018 " ,
"created" : " 2018-02-02T21:12:19.000Z " ,
"createdBy" : " Phan An " ,
"updatedBy" : " Phan An "
}
},
"usageLocations" : [
{
"name" : " PlaybackControls " ,
"source" : " /resources/assets/js/components/layout/app-footer/FooterPlaybackControls.vue " ,
"destination" : " /resources/assets/js/components/layout/app-footer/index.vue " ,
"rows" : [
9
],
"fileInfo" : {
"path" : " /resources/assets/js/components/layout/app-footer/FooterPlaybackControls.vue " ,
"property" : {
"dataLastModified" : " Sun Feb 04 2018 " ,
"lastModified" : " Sun Feb 04 2018 " ,
"created" : " 2018-02-02T21:12:19.000Z " ,
"createdBy" : " Phan An " ,
"updatedBy" : " Phan An "
}
}
}
],
"children" : {
"total" : 4 ,
"tags" : [
" LikeButton " ,
" icon " ,
" PlayButton " ,
" RepeatModeSwitch "
],
"source" : " /resources/assets/js/components/layout/app-footer/FooterPlaybackControls.vue "
}
},
{
"name" : " PlayButton " ,
"type" : " internal " ,
"total" : 1 ,
"source" : {
"path" : " /resources/assets/js/components/ui/FooterPlayButton.vue " ,
"property" : {
"dataLastModified" : " Sun Feb 04 2018 " ,
"lastModified" : " Sun Feb 04 2018 " ,
"created" : " 2018-02-02T21:12:19.000Z " ,
"createdBy" : " Phan An " ,
"updatedBy" : " Phan An "
}
},
"usageLocations" : [
{
"name" : " PlayButton " ,
"source" : " /resources/assets/js/components/ui/FooterPlayButton.vue " ,
"destination" : " /resources/assets/js/components/layout/app-footer/FooterPlaybackControls.vue " ,
"rows" : [
11
],
"fileInfo" : {
"path" : " /resources/assets/js/components/ui/FooterPlayButton.vue " ,
"property" : {
"dataLastModified" : " Sun Feb 04 2018 " ,
"lastModified" : " Sun Feb 04 2018 " ,
"created" : " 2018-02-02T21:12:19.000Z " ,
"createdBy" : " Phan An " ,
"updatedBy" : " Phan An "
}
}
}
],
"children" : {
"total" : 1 ,
"tags" : [
" icon "
],
"source" : " /resources/assets/js/components/ui/FooterPlayButton.vue "
}
},
] تستخدم المكتبة Nodejs و TypeScript و Jest for Development. نظرًا لأن هذه أداة للكشف عن مكونات VUE ، فقد تجد القواعد حول كيفية مكونات VUE في المجلد المدمج.
يحتوي Berryjam على فئتين ، وهما:
VueScanner - استخدم لمسح مشروع لملفات تعريف المكونات. سيتم استخراج القيم النسبية ذات الصلة مثل المصدر ، ومسار الملف ، واسم المكون من ملفات package.json والملفات المدعومة الخاصة بها لتحويل أو تطبيع بيانات مكون RAW والتي سيتم تعيينها إلى كل ملف تعريف مكون.
GitService - إذا كان لدى المشروع مجلد .git ، فسيبحث عن معلومات متعلقة بـ GIT مثل المؤلف و DateTime و MAP لكل ملف تعريف مكون.
ضمن فئة VueScanner ، يمكنك الاتصال على طريقة scan() للبدء في المسح. تشمل الطريقة 5 خطوات رئيسية. هناك ما يلي:
| خطوة | وصف |
|---|---|
1. Group by Related Package.Json | نظرًا لوجود العديد من ملفات package.json والملفات المدعومة ( .vue ، .js ، .jsx ، .ts ، .tsx وجميع الملفات من مجلد .nuxt (إن وجدت)) ، سيقوم النظام بتجميع وتحديد مصدر الأصل |
2. Select Analyzer Lib | لاختيار المكتبة المناسبة التي تتطابق مع إصدار Vue من مشروعك |
3. Prepare Alias Paths | لجمع جميع الأسماء المستعارة من ملفات TS و JS و Vite Config لاستخدامها لاستبدالها في عبارات "الاستيراد" |
4. Analyze Component Files | لكل ملحق ملف ، سيقوم النظام بجمع معلومات المكون ، بما في ذلك الدعائم |
5. Optimize Analyzed Results | استنادًا إلى معلومات المكون ، يتم إجراء تحسينات عن طريق إزالة التكرارات وتنسيق ملف تعريف المكون بطريقة أكثر تنظيماً |
فيما يلي الطرق الرئيسية في فئة GitService :
| طريقة | وصف |
|---|---|
gitScanner | بدء أوامر GIT Log Shell للمسح الضوئي الذي سيتم استخدامه بواسطة gitMapping . |
gitMapping | باستخدام النتيجة من gitScanner لمقارنة اسم المكون واسم ملف GIT سجل. إذا كان كلاهما يتطابق ، فسيتم تحديث معلومات GIT إلى ملف تعريف المكون المعني. |
يتم تحميل المكونات الإضافية لجهة خارجية تلقائيًا من حزمة berryjam. json
لمزيد من المعلومات ، يرجى الرجوع إلى مجلد الوثائق.
نحن ممتنون ونقدر جميع أنواع المساهمات. سواء كنت تساعدنا في الإبلاغ أو إصلاح الأخطاء ، أو اقتراح ميزات جديدة ، أو تحسين وثائقنا أو نشر الكلمة - نود أن نكون جزءًا من مجتمع Berryjam. يرجى الرجوع إلى دليلنا المساهمين وقواعد السلوك.
إذا كنت ترغب في البدء في المساهمة على الفور ، فانتقل إلى علامة التبويب GitHub Accusy وابدأ في البحث عن مشكلات مثيرة للاهتمام. قد تبدأ من خلال العمل على القضايا المسمى بموجب documentation والقضية good first issue .
إذا واجهت خطأً أو مشكلة أثناء استخدام Berryjam ، فلديك فكرة عن كيفية تحسين Berryjam أو ربما تبحث عن الوثائق والتفكير في أنه يمكن تحسينها ... من فضلك لا تتردد في تقديم مشكلة؟
إذا كنت مطور Vue.js غير معتاد على Node.js. ، يمكنك إرسال code example مسبق على كيفية إنشاء مكونات VUE. تحقق من وحداتنا المدمجة لمزيد من التفاصيل.
نحن أكثر من سعداء لمساعدتك. إذا كان لديك أي أسئلة ، فتوصل إلى أي أخطاء أو تواجه أي مشاكل ، فلا تتردد في طلب المساعدة في Discord Berryjam. أي شيء يتعلق بـ Berryjam على الطاولة!
يتم توزيع Berryjam بموجب ترخيص MIT. يرجى الرجوع إلى ملف الترخيص. md لمزيد من التفاصيل.
