Conheça o Vue Service Bay-sua micro-utilidade para modificações em massa sem esforço nos componentes do vue.js. Diga adeus a refatoração tediosa e manual e acelerar seu pipeline de desenvolvimento com esta ferramenta leve e poderosa.
A refatoração geralmente segue uma das duas abordagens: incremental ou por atacado. A abordagem que você escolher depende do seu projeto. Por exemplo, se você precisar aplicar um novo sistema de design em toda a sua base de código de uma só vez, essa ferramenta é inestimável. As máquinas podem executar tarefas simples muito mais rápidas e precisamente do que os seres humanos. Automatando suas tarefas de refatoração com esta biblioteca melhorará significativamente a eficiência e a precisão. Este repositório fornece uma ferramenta para aplicar essa refatoração aos componentes do vue.js.
O fluxograma a seguir simplifica a interação entre este repositório e seu fluxo de trabalho:
Fluxograma LR
Baía de serviço de subgraff vue
v1 [Leia o arquivo VUE]-> V2 [dividido por seção]
v2 [dividido por seção]-> v3 [analisar para ast]
V4 [AST TO VUE FILE]
fim
Código do Land Subgraph User Land
v3-> U1 [manipular ast]
U1-> v4
fim
Mesmo se você é novo em manipular as AST (Sintaxe Abstract Trees), este repositório fornece muitos exemplos para iniciar.
Para experimentar esta ferramenta, clone o repositório:
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 o Vue Service Bay como uma dependência de desenvolvimento:
npm i -D vue-service-bay O sinalizador -D instala o pacote como uma dependência de desenvolvimento.
Primeiro, você precisará criar um script de Migration Runner. Para mais detalhes, consulte o index.js em nossos exemplos.
Em seguida, você precisará implementar a lógica de migração específica. Veja nossos exemplos para obter mais detalhes:
(Magicstring é uma maneira conveniente de fazer alterações no ASTS. Para obter mais informações, visite https://github.com/rich-harris/magic-string)
Execute seu script de Migration Runner:
node index.jsASTS é complicado e bizarro para o espectador pela primeira vez. Por outro lado, se você puder dominar o ASTS, eles podem ser uma ótima arma para refatorar e outras programas de processamento de idiomas. Aqui, explicaremos como entender AST de uma maneira simples.
Primeiro, as linguagens de programação são frequentemente tratadas como uma árvore de sintaxe abstrata (AST) para facilitar a compreensão; Um AST é uma estrutura de dados amplamente usada pelos compiladores para representar a estrutura do código do programa.
Esta biblioteca também usa ASTS para refatorar. Simplificando, um programa é transformado em um AST e, em seguida, o AST é manipulado e escrito de volta ao programa novamente.
Felizmente, existem ferramentas por aí para entender facilmente AST. Isso é o AST Explorer.
Usando o AST Explorer, podemos pular automaticamente para o AST correspondente clicando em qualquer lugar. Isso facilita a descoberta de informações sobre o nó que queremos processar e seus nós circundantes, incluindo seus pais.
Por fim, explicaremos como visualizar ASTs para cada idioma.
Usamos htmlparser2 para o nosso analisador HTML. No momento da implementação original desta biblioteca, htmlparser2 era o único analisador principal que poderia escrever corretamente o ASTS de volta ao HTML.
Para visualizar o ASTS analisado pelo htmlparser2 , selecione a linguagem HTML e htmlparser2 no explorador AST.
Utilizamos recast do nosso analisador JavaScript / TypeScript. No momento da implementação original desta biblioteca, acorn era o único analisador importante que poderia escrever corretamente o HTML. Primeiro tentamos a Bolota, mas não conseguimos adotá -la porque a Bolsa ignora comentários. Também queríamos apoiar o TypeScript, então finalmente escolhemos recast . Também analisamos o JavaScript como TypeScript. Isso ocorre porque o TypeScript é um superconjunto de JavaScript.
Para visualizar o ASTS analisado por recast , selecione a linguagem JavaScript e recast o explorador AST. E pressione o botão Config e selecione typescript como analisador.
Usamos postcss para o nosso analisador CSS / SCSS.
Para visualizar o ASTS analisado pelo PostCSS , selecione o CSS e postcss no AST Explorer.
O Vue Service Bay pode ser usado com qualquer idioma para migrações que não requerem manipulação AST. No entanto, se você estiver usando o AST, os seguintes idiomas são suportados atualmente. Se você quiser adicionar suporte para outros idiomas, sinta -se à vontade para enviar um PR.
<template><Script><Style>Estamos sempre abertos a problemas e solicitam solicitações. Suas contribuições ajudam a tornar o VueServiceBay uma ferramenta melhor para todos.
Enquanto acolhemos questões e solicitamos solicitações, o tempo de manutenção ativo é limitado. Se você tiver solicitações de recursos ou exigir alterações substanciais, o envio de uma solicitação de tração será fortemente recomendado.
