Treffen Sie Vue Service Bay-Ihre Anlaufstelle für mühelose, mutige Modifikationen in Vue.js-Komponenten. Verabschieden Sie sich von mühsamer, manuellem Refactoring und beschleunigen Sie Ihre Entwicklungspipeline mit diesem leichten, aber leistungsstarken Werkzeug.
Refactoring folgt im Allgemeinen einem von zwei Ansätzen: inkrementell oder im Großhandel. Der Ansatz, den Sie wählen, hängt von Ihrem Projekt ab. Wenn Sie beispielsweise ein neues Designsystem auf Ihre gesamte Codebasis auf einmal anwenden müssen, ist dieses Tool von unschätzbarem Wert. Maschinen können einfache Aufgaben weitaus schneller und genauer ausführen als Menschen. Durch die Automatisierung Ihrer Refactoring -Aufgaben mit dieser Bibliothek verbessert die Effizienz und Genauigkeit erheblich. Dieses Repository bietet ein Tool zum Anwenden solcher Refactoring auf Vue.js -Komponenten.
Das folgende Flussdiagramm vereinfacht die Interaktion zwischen diesem Repository und Ihrem Workflow:
Flussdiagramm LR
Subgraph Vue Service Bay
V1 [VUE-Datei lesen]-> v2 [geteilt nach Abschnitt]
v2 [aufgeteilt nach Abschnitt]-> V3 [Parse to AST]
v4 [AST to VUE -Datei]
Ende
Code des Subgraph User Land Landes
v3-> u1 [manipulieren Sie AST]
U1-> v4
Ende
Selbst wenn Sie neu in der Manipulation von AST (abstrakte Syntaxbäume) sind, bietet dieses Repository viele Beispiele, um Ihnen den Einstieg zu erleichtern.
Um dieses Tool auszuprobieren, klonen Sie das Repository:
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 difftoolInstallieren Sie Vue Service Bay als Develieabhängigkeit:
npm i -D vue-service-bay Das -D -Flag installiert das Paket als Entwicklungsabhängigkeit.
Zunächst müssen Sie ein Migration Runner -Skript erstellen. Weitere Informationen finden Sie in unseren Beispielen in den Index.js.
Als nächstes müssen Sie eine bestimmte Migrationslogik implementieren. Weitere Informationen finden Sie in unseren Beispielen:
(MagicString ist eine bequeme Möglichkeit, Änderungen an ASTS vorzunehmen. Weitere Informationen finden Sie unter https://github.com/rich-harris/magic-string)
Führen Sie Ihr Migration Runner Skript aus:
node index.jsASTS sind für den Erstbetärer kompliziert und bizarr. Auf der anderen Seite können sie, wenn Sie ASTS beherrschen können, eine großartige Waffe für die Wiederherstellung und andere Sprachverarbeitungsprogramme sein. Hier werden wir erklären, wie man AST auf einfache Weise versteht.
Erstens werden Programmiersprachen häufig als abstrakter Syntaxbaum (AST) behandelt, um das Verständnis einfach zu verstehen. Ein AST ist eine Datenstruktur, die von Compilern weit verbreitet ist, um die Struktur des Programmcodes darzustellen.
Diese Bibliothek verwendet ASTS auch zum Refactoring. Einfach ausgedrückt, ein Programm wird in ein AST verwandelt, und dann wird der AST erneut manipuliert und wieder in das Programm geschrieben.
Glücklicherweise gibt es Werkzeuge, die AST leicht verstehen. Das ist AST Explorer.
Mit AST Explorer können wir automatisch zum entsprechenden AST springen, indem wir überall klicken. Dies erleichtert es leicht, Informationen über den Knoten zu finden, den wir verarbeiten möchten, und seine umgebenden Knoten, einschließlich dessen Eltern.
Zuletzt werden wir erklären, wie Sie ASTS für jede Sprache anzeigen können.
Wir verwenden htmlparser2 für unseren HTML -Parser. Zum Zeitpunkt der ursprünglichen Implementierung dieser Bibliothek war htmlparser2 der einzige große Parser, der Asts korrekt an HTML schreiben konnte.
Wählen Sie die HTML -Sprache und htmlparser2 im AST -Explorer aus, um ASTS analysiert von htmlparser2 , die HTML -Sprache und HTMLParser2.
Wir verwenden recast für unseren JavaScript / TypeScript -Parser. Zum Zeitpunkt der ursprünglichen Implementierung dieser Bibliothek war acorn der einzige große Parser, der Asts korrekt an HTML schreiben konnte. Wir haben es mit ACORN ausprobiert, konnten es aber nicht annehmen, weil Acorn Kommentare ignoriert. Wir wollten auch TypeScript unterstützen, also entschieden wir uns endgültig für recast . Wir analysieren auch JavaScript als TypeScript. Dies liegt daran, dass TypeScript ein Superset von JavaScript ist.
Wählen Sie die JavaScript -Sprache aus, um ASTS analysiert durch recast und recast im AST -Explorer. Und drücken Sie die Konfigurationstaste und wählen Sie typescript als Parser.
Wir verwenden postcss für unseren CSS / SCSS -Parser.
Wählen Sie die CSS und postcss im AST -Explorer aus, um PostCSS anzuzeigen.
Vue Service Bay kann mit jeder Sprache für Migrationen verwendet werden, für die keine AST -Manipulation erforderlich ist. Wenn Sie AST jedoch verwenden, werden derzeit die folgenden Sprachen unterstützt. Wenn Sie Unterstützung für andere Sprachen hinzufügen möchten, können Sie eine PR einreichen.
<template><Script><Style>Wir sind immer offen für Probleme und Anfragen. Ihre Beiträge machen VueServiceBay zu einem besseren Werkzeug für alle.
Während wir Probleme begrüßen und Anfragen ziehen, ist die aktive Wartungszeit begrenzt. Wenn Sie Feature -Anfragen haben oder wesentliche Änderungen erfordern, wird eine Pull -Anfrage festgelegt.
