Rencontrez Vue Service Bay - votre micro-utilité incontournable pour les modifications en vrac sans effort dans les composants Vue.js. Dites adieu à la refactorisation fastidieuse et manuelle et accélérez votre pipeline de développement avec cet outil léger mais puissant.
Le refactorisation suit généralement l'une des deux approches: incrémentale ou en gros. L'approche que vous choisissez dépend de votre projet. Par exemple, si vous devez appliquer un nouveau système de conception sur toute votre base de code en une seule fois, cet outil est inestimable. Les machines peuvent exécuter des tâches simples beaucoup plus rapides et plus précisément que les humains. L'automatisation de vos tâches de refactorisation avec cette bibliothèque améliorera considérablement l'efficacité et la précision. Ce référentiel fournit un outil pour appliquer un tel refactoring aux composants Vue.js.
L'organigramme suivant simplifie l'interaction entre ce référentiel et votre flux de travail:
Organigramme LR
Sub-Graph Vue Service Bay
v1 [Lire Vue Fichier] -> V2 [Split by Section]
v2 [Split par section] -> v3 [analyse à AST]
V4 [AST à Vue Fichier]
fin
CODE DE LA LAND UTILISATION SUBGRAPH
v3 -> u1 [manipuler ast]
U1 -> V4
fin
Même si vous êtes nouveau dans la manipulation de l'AST (abstrait des arbres de syntaxe), ce référentiel fournit de nombreux exemples pour vous aider à démarrer.
Pour essayer cet outil, clonez le référentiel:
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 difftoolInstallez Vue Service Bay en tant que dépendance dev:
npm i -D vue-service-bay L'indicateur -D installe le package en tant que dépendance de développement.
Tout d'abord, vous devrez créer un script de coureur de migration. Pour plus de détails, veuillez consulter l'index.js dans nos exemples.
Ensuite, vous devrez implémenter une logique de migration spécifique. Voir nos exemples pour plus de détails:
(Magicstring est un moyen pratique de modifier les AST. Pour plus d'informations, visitez https://github.com/rich-harris/magic-string)
Exécutez votre script de coureur de migration:
node index.jsLes AST sont compliqués et bizarres pour le premier spectateur. D'un autre côté, si vous pouvez maîtriser les AST, ils peuvent être une excellente arme pour refactoriser et d'autres programmes de traitement du langage. Ici, nous expliquerons comment comprendre AST d'une manière simple.
Premièrement, les langages de programmation sont souvent traités comme un arbre de syntaxe abstrait (AST) pour faciliter la compréhension; Un AST est une structure de données largement utilisée par les compilateurs pour représenter la structure du code du programme.
Cette bibliothèque utilise également des AST pour le refactorisation. Autrement dit, un programme est transformé en AST, puis l'AST est manipulé et réécrit à nouveau dans le programme.
Heureusement, il existe des outils pour comprendre facilement AST. C'est AST Explorer.
En utilisant AST Explorer, nous pouvons automatiquement passer à l'AST correspondant en cliquant n'importe où. Cela facilite la recherche d'informations sur le nœud que nous voulons traiter et ses nœuds environnants, y compris son parent.
Enfin, nous expliquerons comment voir les AST pour chaque langue.
Nous utilisons htmlparser2 pour notre analyseur HTML. Au moment de la mise en œuvre originale de cette bibliothèque, htmlparser2 était le seul analyseur majeur qui pourrait réécrire correctement les AST à HTML.
Pour voir les AST analysés par htmlparser2 , sélectionnez la langue HTML et htmlparser2 dans l'Explorateur AST.
Nous utilisons recast pour notre analyseur JavaScript / TypeScript. Au moment de la mise en œuvre originale de cette bibliothèque, acorn était le seul analyseur majeur qui pourrait réécrire correctement les AST à HTML. Nous avons d'abord essayé Acorn, mais nous n'avons pas pu l'adopter parce que Acorn ignore les commentaires. Nous voulions également prendre en charge TypeScript, nous avons donc finalement choisi recast . Nous analysons également JavaScript comme dactylographié. En effet, TypeScript est un superset de JavaScript.
Pour afficher les AST analysés par recast , sélectionnez la langue JavaScript et recast dans l'Explorateur AST. Et appuyez sur le bouton CONFIG et sélectionnez typescript comme analyseur.
Nous utilisons postcss pour notre analyseur CSS / SCSS.
Pour afficher les AST analysés par PostCSS , sélectionnez le CSS et postcss dans l'Explorateur AST.
Vue Service Bay peut être utilisé avec n'importe quelle langue pour les migrations qui ne nécessitent pas de manipulation AST. Cependant, si vous utilisez AST, les langues suivantes sont actuellement prises en charge. Si vous souhaitez ajouter un support pour d'autres langues, n'hésitez pas à soumettre un PR.
<template><Script><Style>Nous sommes toujours ouverts aux problèmes et aux demandes de traction. Vos contributions aident à faire de VueserviceBay un meilleur outil pour tout le monde.
Bien que nous saluons les problèmes et les demandes de traction, le temps de maintenance actif est limité. Si vous avez des demandes de fonctionnalités ou avez besoin de modifications substantielles, la soumission d'une demande de traction est fortement conseillée.
