berryjam
0.1.0-alpha.64
Questões - ingressar na nossa discórdia - licença - berryjam nuvem
Disponível para: vue.js (3.x), nuxt (3.x)
O Berryjam fornece uma maneira simples de identificar seu uso de componentes, adereços e seus relacionamentos. Com base na saída da sua varredura, você pode criar seu próprio painel e executar análises nos componentes do projeto para melhorar as comunicações em toda a sua equipe de desenvolvimento.
1. Digitalize seu projeto para componentes  | 2. Analise os componentes e seus relacionamentos  |
3. Digitam log git para autor e datetime  | 4. Detectar adereços automaticamente para cada componente  |
O Berryjam não é compatível com as versões Vue 2 ou Lower.
O Berryjam foi totalmente testado para trabalhar com a versão do nó de 16.0 a 18.17.1 (LTS) . As versões acima de 18.17.1 (LTS) também devem funcionar, mas não foram totalmente testadas.
Existem algumas maneiras de instalar o Berryjam, NPM, PNPM e fios. Se você instalar via NPM, aqui está um único CMD para instalar esta biblioteca
npm install berryjam pnpm add berryjam yarn add berryjam Para começar a digitalizar seu projeto, você precisará primeiro importar a classe VueScanner e criar sua instância.
import { homedir } from 'os' ;
import VueScanner from "berryjam"
import type { VueScannerOption , ComponentProfile } from "berryjam"
...
const pathToScan = '../your-vue-project-path' ;
const option : VueScannerOption = {
// this folder will be used to store the exact versions of babel & vue compiler
appDir : ` ${ homedir ( ) } /.vueScanner` ,
// ... any other options
}
// Create a new VueScanner instance with the required parameters
const vueScanner = new VueScanner ( pathToScan , option ) ;
...
// To start scanning without async/await
vueScanner . scan ( ) . then ( result => {
// the result will be an array of ComponentProfile
// log to see the result
console . log ( result ) ;
} )
// or, You can use async/await
async function whatEverFunction ( ) {
const result = await vueScanner . scan ( ) ;
} Nota: Para um projeto NUXT , verifique se você possui uma pasta .nuxt antes de digitalizar.
A função VueScanner leva dois parâmetros da seguinte forma:
VueScannerOption . Aqui está a descrição detalhada de cada opção disponível na interface VueScannerOption :
| Propriedade | Tipo | Descrição |
|---|---|---|
appDir | string | O caminho do diretório do projeto a ser digitalizado. |
output | OutputFormat (opcional) | O formato de saída desejado do resultado digitalizado. (JSON por padrão) |
ignore | string[] (opcional) | Uma matriz de nomes de arquivos ou nomes de diretórios a serem excluídos da digitalização. |
verbose | boolean (opcional) | Habilite o modo detalhado para obter informações de varredura mais detalhadas. |
debug | boolean (opcional) | Opere o scanner no modo de depuração, fornecendo informações de depuração. |
O tipo de OutputFormat representa formatos de saída disponíveis.
| Tipo | Descrição |
|---|---|
"json" | Saia o resultado digitalizado no formato JSON e salvo como 'componente-profiles.json' dentro do 'AppDir'. |
"stdout" | Exiba o resultado digitalizado diretamente no console (STDOUT). |
Essas opções e tipos oferecem flexibilidade e personalização ao usar a função VueScanner para analisar os projetos Vue.js.
Para mais detalhes sobre a classe VueScanner , confira abaixo.
Ao chamar o método scan , ele digitalizará os componentes VUE e retornará ComponentProfile[] . Aqui está um exemplo de como pode ser. Para fins de demonstração, examinamos um projeto de código aberto chamado Koel.
[
{
"name" : " PlaybackControls " ,
"type" : " internal " ,
"total" : 1 ,
"source" : {
"path" : " /resources/assets/js/components/layout/app-footer/FooterPlaybackControls.vue " ,
"property" : {
"dataLastModified" : " Sun Feb 04 2018 " ,
"lastModified" : " Sun Feb 04 2018 " ,
"created" : " 2018-02-02T21:12:19.000Z " ,
"createdBy" : " Phan An " ,
"updatedBy" : " Phan An "
}
},
"usageLocations" : [
{
"name" : " PlaybackControls " ,
"source" : " /resources/assets/js/components/layout/app-footer/FooterPlaybackControls.vue " ,
"destination" : " /resources/assets/js/components/layout/app-footer/index.vue " ,
"rows" : [
9
],
"fileInfo" : {
"path" : " /resources/assets/js/components/layout/app-footer/FooterPlaybackControls.vue " ,
"property" : {
"dataLastModified" : " Sun Feb 04 2018 " ,
"lastModified" : " Sun Feb 04 2018 " ,
"created" : " 2018-02-02T21:12:19.000Z " ,
"createdBy" : " Phan An " ,
"updatedBy" : " Phan An "
}
}
}
],
"children" : {
"total" : 4 ,
"tags" : [
" LikeButton " ,
" icon " ,
" PlayButton " ,
" RepeatModeSwitch "
],
"source" : " /resources/assets/js/components/layout/app-footer/FooterPlaybackControls.vue "
}
},
{
"name" : " PlayButton " ,
"type" : " internal " ,
"total" : 1 ,
"source" : {
"path" : " /resources/assets/js/components/ui/FooterPlayButton.vue " ,
"property" : {
"dataLastModified" : " Sun Feb 04 2018 " ,
"lastModified" : " Sun Feb 04 2018 " ,
"created" : " 2018-02-02T21:12:19.000Z " ,
"createdBy" : " Phan An " ,
"updatedBy" : " Phan An "
}
},
"usageLocations" : [
{
"name" : " PlayButton " ,
"source" : " /resources/assets/js/components/ui/FooterPlayButton.vue " ,
"destination" : " /resources/assets/js/components/layout/app-footer/FooterPlaybackControls.vue " ,
"rows" : [
11
],
"fileInfo" : {
"path" : " /resources/assets/js/components/ui/FooterPlayButton.vue " ,
"property" : {
"dataLastModified" : " Sun Feb 04 2018 " ,
"lastModified" : " Sun Feb 04 2018 " ,
"created" : " 2018-02-02T21:12:19.000Z " ,
"createdBy" : " Phan An " ,
"updatedBy" : " Phan An "
}
}
}
],
"children" : {
"total" : 1 ,
"tags" : [
" icon "
],
"source" : " /resources/assets/js/components/ui/FooterPlayButton.vue "
}
},
] A biblioteca usa Nodejs , TypeScript e Jest for Development. Como essa é uma ferramenta para detectar componentes do VUE, você pode encontrar as regras sobre como os componentes do VUE na pasta interna de regras.
Berryjam contém 2 classes, a saber::
VueScanner - Use para digitalizar um projeto para perfis de componentes. Ele extrairá valores relativos relevantes, como origem, caminho do arquivo, nome do componente dos arquivos package.json e seus respectivos arquivos suportados para transformar ou normalizar dados de componentes brutos que serão mapeados para cada perfil do componente.
GitService - Se o projeto tiver pasta .git, ele procurará informações relacionadas ao GIT, como autor e datetime e mapearem para cada perfil de componente.
Dentro da classe VueScanner , você pode solicitar o método scan() para iniciar a digitalização. O método abrange 5 etapas principais. Há o seguinte:
| Etapa | Descrição |
|---|---|
1. Group by Related Package.Json | Como existem vários arquivos package.json e arquivos suportados ( .vue , .js , .jsx , .ts , .tsx e todos os arquivos da pasta .nuxt (se houver)), o sistema agrupará e determinará a fonte de origem |
2. Select Analyzer Lib | Para escolher a biblioteca certa que corresponde à versão Vue do seu projeto |
3. Prepare Alias Paths | Para reunir todos os aliases dos arquivos de configuração de TS, JS e Vite a serem usados para substituir as instruções 'importar' |
4. Analyze Component Files | Para cada extensão de arquivo, o sistema reunirá informações de componentes, incluindo adereços |
5. Optimize Analyzed Results | Com base nas informações do componente, as melhorias são feitas removendo duplicatas e formatando o perfil do componente de uma maneira mais estruturada |
Abaixo estão os principais métodos da classe GitService :
| Método | Descrição |
|---|---|
gitScanner | Inicie os comandos de shell de log git na digitalização que serão usados pelo gitMapping . |
gitMapping | Usando o resultado do gitScanner para comparar o nome do componente e o nome do log do Git. Se ambos corresponderem, as informações do Git serão atualizadas para o respectivo perfil do componente. |
Os plugins de terceiros são carregados automaticamente do pacote de berryjam.json
Para mais informações, consulte a pasta de documentação.
Somos gratos e agradecidos por todos os tipos de contribuições. Esteja você está nos ajudando a relatar ou corrigir bugs, propondo novos recursos, melhorando nossa documentação ou espalhando a palavra - gostaríamos de tê -lo como parte da comunidade de Berryjam. Consulte nosso guia e código de conduta contribuintes.
Se você deseja começar a contribuir imediatamente, navegue para a guia Github Issles e comece a analisar questões interessantes. Você pode começar trabalhando em questões rotuladas em documentation e good first issue .
Se você se deparar com um erro ou um problema ao usar o Berryjam, tem uma idéia de como melhor Berryjam ou talvez esteja olhando a documentação e pensando que ele poderia ser melhorado ... por favor, não hesite em enviar um problema?
Se você é um desenvolvedor Vue.js que não está familiarizado com o Node.js., pode enviar um code example rotulado como cria componentes VUE. Confira nossas caras embutidas para obter mais detalhes.
Estamos mais do que felizes em ajudá -lo. Se você tiver alguma dúvida, encontrar algum erro ou enfrentar problemas, sinta -se à vontade para pedir ajuda na Berryjam Discord. Qualquer coisa relacionada ao berryjam está sobre a mesa!
O Berryjam é distribuído pela licença do MIT. Consulte nosso arquivo License.md para obter mais detalhes.
