Meet Vue Service Bay-انعطفك في التقييم الدقيق للتعديلات السائبة دون عناء في مكونات Vue.js. قل وداعًا لأحالة أنابيب التطوير الخاصة بك وتسريعها لتسريع خط أنابيب التطوير الخاص بك بهذه الأداة الخفيفة الوزن.
تتبع إعادة البناء عمومًا أحد نهجين: تدريجيات أو بالجملة. يعتمد النهج الذي تختاره على مشروعك. على سبيل المثال ، إذا كنت بحاجة إلى تطبيق نظام تصميم جديد عبر قاعدة الكود بالكامل في وقت واحد ، فإن هذه الأداة لا تقدر بثمن. يمكن للآلات تنفيذ مهام بسيطة بشكل أسرع وأكثر دقة من البشر. سيؤدي أتمتة مهام إعادة الطرد الخاصة بك مع هذه المكتبة إلى تحسين الكفاءة والدقة بشكل كبير. يوفر هذا المستودع أداة لتطبيق مثل هذه إعادة النية على مكونات vue.js.
يقوم المخطط الانسيابي التالي بتبسيط التفاعل بين هذا المستودع وسير العمل الخاص بك:
مخطط انسيابي LR
الخليج الفرعي Vue Service Bay
v1 [اقرأ ملف vue]-> v2 [تقسيم حسب القسم]
v2 [مقسمة حسب القسم]-> v3 [تحليل إلى AST]
v4 [AST to Vue File]
نهاية
رمز أرض المستخدم الفرعي
V3-> U1 [معالجة AST]
u1-> v4
نهاية
حتى لو كنت جديدًا في معالجة AST (أشجار بناء الجملة المجردة) ، فإن هذا المستودع يوفر الكثير من الأمثلة لتبدأ.
لتجربة هذه الأداة ، استنساخ المستودع:
git clone [email protected]:flyle-io/vue-service-bay.git
cd vue-service-bay
npm install
cd packages/examples
node migration/index.js
# Check the migration results however you like!
git difftoolتثبيت Vue Service Bay كاعتماد على DEV:
npm i -D vue-service-bay يقوم علامة -D بتثبيت الحزمة كاعتماد على التطوير.
أولاً ، ستحتاج إلى إنشاء نص عداء للترحيل. لمزيد من التفاصيل ، يرجى الرجوع إلى index.js في أمثلةنا.
بعد ذلك ، ستحتاج إلى تنفيذ منطق ترحيل معين. انظر أمثلةنا لمزيد من التفاصيل:
(Magicsstring هي وسيلة مريحة لإجراء تغييرات على ASTS. لمزيد من المعلومات ، تفضل بزيارة https://github.com/rich-harris/magic-tring)
قم بتنفيذ البرنامج النصي العداء للترحيل:
node index.jsASTS معقدة وغريبة للمشاهد لأول مرة. من ناحية أخرى ، إذا كان بإمكانك إتقان ASTS ، فيمكن أن يكونوا سلاحًا رائعًا لإعادة إنشاء وبرمجة معالجة اللغة الأخرى. هنا ، سوف نشرح كيفية فهم AST بطريقة بسيطة.
أولاً ، غالبًا ما يتم التعامل مع لغات البرمجة على أنها شجرة بناء جملة مجردة (AST) لسهولة الفهم ؛ AST هي بنية بيانات تستخدم على نطاق واسع من قبل المترجمين لتمثيل بنية رمز البرنامج.
تستخدم هذه المكتبة أيضًا ASTS لإعادة إنشاء. ببساطة ، يتم تحويل البرنامج إلى AST ، ثم يتم معالجة AST وكتابته مرة أخرى في البرنامج مرة أخرى.
لحسن الحظ ، هناك أدوات لفهم AST بسهولة. هذا هو AST Explorer.
باستخدام AST Explorer ، يمكننا القفز تلقائيًا إلى AST المقابل عن طريق النقر على أي مكان. هذا يجعل من السهل اكتشاف معلومات حول العقدة التي نريد معالجتها والعقد المحيطة بها ، بما في ذلك الوالد.
أخيرًا ، سنشرح كيفية عرض ASTS لكل لغة.
نستخدم htmlparser2 لمحلل HTML الخاص بنا. في وقت التنفيذ الأصلي لهذه المكتبة ، كان htmlparser2 هو المحلل الرئيسي الوحيد الذي يمكنه كتابة ASTS بشكل صحيح إلى HTML.
لعرض ASTS المحفوظ بواسطة htmlparser2 ، حدد لغة HTML و htmlparser2 في AST Explorer.
نستخدم recast لمحللنا JavaScript / TypeScript. في وقت التنفيذ الأصلي لهذه المكتبة ، كان acorn هو المحلل الرئيسي الوحيد الذي يمكنه كتابة Asts بشكل صحيح إلى HTML. حاولنا أولاً Acorn لكننا لم نتمكن من تبنيه لأن Acorn يتجاهل التعليقات. أردنا أيضًا دعم TypeScript ، لذلك اخترنا أخيرًا recast . نحن أيضا تحليل JavaScript كما typeScript. هذا لأن TypeScript هي مجموعة من JavaScript.
لعرض ASTS المحسّنة بواسطة recast ، حدد لغة JavaScript وأعد recast في AST Explorer. واضغط على زر التكوين وحدد typescript كحامل.
نحن نستخدم postcss لمحلل CSS / SCSS.
لعرض ASTS المحفوظ بواسطة PostCSS ، حدد CSS و postcss في AST Explorer.
يمكن استخدام خليج Vue Service مع أي لغة للهجرة التي لا تتطلب معالجة AST. ومع ذلك ، إذا كنت تستخدم AST ، فإن اللغات التالية مدعومة حاليًا. إذا كنت ترغب في إضافة دعم للغات الأخرى ، فلا تتردد في تقديم العلاقات العامة.
<template><Script><Style>نحن دائمًا منفتحون على المشكلات وسحب الطلبات. تساعد مساهماتك في جعل VueserviceBay أداة أفضل للجميع.
بينما نرحب بالمشكلات وسحب الطلبات ، فإن وقت الصيانة النشط محدود. إذا كان لديك طلبات ميزة أو تتطلب تغييرات جوهرية ، يتم تقديم طلب تقديم طلب سحب بقوة.
