Conozca a Vue Service Bay: su micro-utilidad para obtener modificaciones a granel sin esfuerzo en los componentes Vue.js. Diga adiós a la tediosa refactorización manual y acelere su tubería de desarrollo con esta herramienta liviana pero poderosa.
La refactorización generalmente sigue uno de los dos enfoques: incremental o mayorista. El enfoque que elija depende de su proyecto. Por ejemplo, si necesita aplicar un nuevo sistema de diseño en toda su base de código a la vez, esta herramienta es invaluable. Las máquinas pueden ejecutar tareas simples con mucho más rápido y más precisa que los humanos. La automatización de sus tareas de refactorización con esta biblioteca mejorará significativamente la eficiencia y la precisión. Este repositorio proporciona una herramienta para aplicar dicha refactorización a los componentes Vue.js.
El siguiente diagrama de flujo simplifica la interacción entre este repositorio y su flujo de trabajo:
diagrama de flujo LR
Subgraph Vue Service Bay
V1 [Leer archivo VUE]-> V2 [división por sección]
v2 [dividido por sección]-> v3 [analizar a AST]
V4 [AST TO VUE FILE]
fin
Código de usuarios de subgraph Land
V3-> U1 [manipular AST]
U1-> V4
fin
Incluso si eres nuevo en la manipulación de AST (árboles de sintaxis abstracta), este repositorio proporciona muchos ejemplos para comenzar.
Para probar esta herramienta, clone el repositorio:
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 difftoolInstale Vue Service Bay como dependencia de desarrollo:
npm i -D vue-service-bay La bandera -D instala el paquete como una dependencia de desarrollo.
Primero, necesitará crear un script de corredor de migración. Para obtener más detalles, consulte Index.js en nuestros ejemplos.
A continuación, deberá implementar una lógica de migración específica. Vea nuestros ejemplos para más detalles:
(MagicString es una forma conveniente de hacer cambios en ASTS. Para obtener más información, visite https://github.com/rich-harris/magicsting)
Ejecute su script de corredor de migración:
node index.jsLos AST son complicados y extraños para el espectador por primera vez. Por otro lado, si puedes dominar ASTS, pueden ser una gran arma para la refactorización y otra programación de procesamiento del lenguaje. Aquí, explicaremos cómo entender AST de una manera simple.
Primero, los lenguajes de programación a menudo se tratan como un árbol de sintaxis abstracto (AST) para facilitar la comprensión; Un AST es una estructura de datos ampliamente utilizada por los compiladores para representar la estructura del código del programa.
Esta biblioteca también usa ASTS para la refactorización. En pocas palabras, un programa se convierte en un AST, y luego el AST se manipula y vuelve a escribir en el programa nuevamente.
Afortunadamente, hay herramientas por ahí para comprender fácilmente AST. Ese es Ast Explorer.
Usando AST Explorer, podemos saltar automáticamente al AST correspondiente haciendo clic en cualquier lugar. Esto facilita la información sobre el nodo que queremos procesar y sus nodos circundantes, incluido su padre.
Por último, explicaremos cómo ver ASTS para cada idioma.
Usamos htmlparser2 para nuestro analizador HTML. En el momento de la implementación original de esta biblioteca, htmlparser2 era el único analizador importante que podía volver correctamente a ASTS a HTML.
Para ver ASTS analizados por htmlparser2 , seleccione el lenguaje HTML y htmlparser2 en el AST Explorer.
Usamos recast para nuestro analizador JavaScript / TypeScript. En el momento de la implementación original de esta biblioteca, acorn era el único analizador importante que podía volver correctamente a ASTS a HTML. Primero probamos Acorn, pero no pudimos adoptarlo porque Acorn ignora los comentarios. También queríamos admitir TypeScript, por lo que finalmente elegimos recast . También analizamos JavaScript como TypeScript. Esto se debe a que TypeScript es un superconjunto de JavaScript.
Para ver ASTS analizados por recast , seleccione el lenguaje JavaScript y recast en el AST Explorer. Y presione el botón de configuración y seleccione typescript como analizador.
Usamos postcss para nuestro analizador CSS / SCSS.
Para ver ASTS analizados por PostCSS , seleccione el CSS y postcss en el AST Explorer.
Vue Service Bay se puede usar con cualquier idioma para migraciones que no requieran manipulación AST. Sin embargo, si está utilizando AST, los siguientes idiomas son compatibles actualmente. Si desea agregar soporte para otros idiomas, no dude en enviar un PR.
<template><Script><Style>Siempre estamos abiertos a problemas y solicitudes. Sus contribuciones ayudan a hacer de VueServiceBay una mejor herramienta para todos.
Si bien damos la bienvenida a los problemas y aplica solicitudes, el tiempo de mantenimiento activo es limitado. Si tiene solicitudes de funciones o requiere cambios sustanciales, se recomienda enviar una solicitud de extracción.
