berryjam
0.1.0-alpha.64
Problemas - Únete a nuestra discordia - Licencia - BerryJam Cloud
Disponible para: vue.js (3.x), nuxt (3.x)
Berryjam proporciona una manera simple de identificar su uso de componentes, accesorios y sus relaciones. Según la salida de su escaneo, puede crear su propio panel de control y ejecutar el análisis en los componentes de su proyecto para mejorar las comunicaciones en su equipo de desarrollo.
1. Escanee su proyecto en busca de componentes  | 2. Analizar componentes y sus relaciones  |
3. Escanee el registro de git para autor y tiempo de fecha  | 4. Detectar automáticamente los accesorios para cada componente  |
Berryjam no es compatible con VUE 2 o versiones inferiores.
Berryjam ha sido probado por completo para trabajar con la versión de nodo de 16.0 a 18.17.1 (LTS) . Las versiones superiores a 18.17.1 (LTS) deberían funcionar también, pero no se han probado completamente.
Hay algunas formas en que puede instalar BerryJam, a saber, NPM, PNPM e hilo. Si se instala a través de NPM, aquí hay un solo CMD para instalar esta biblioteca
npm install berryjam pnpm add berryjam yarn add berryjam Para comenzar a escanear su proyecto, primero deberá importar la clase VueScanner y crear su instancia.
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 un proyecto NUXT , asegúrese de tener una carpeta .nuxt antes de escanear.
La función VueScanner toma dos parámetros de la siguiente manera:
VueScannerOption . Aquí está la descripción detallada de cada opción disponible dentro de la interfaz VueScannerOption :
| Propiedad | Tipo | Descripción |
|---|---|---|
appDir | string | El camino del directorio del proyecto a escanear. |
output | OutputFormat (opcional) | El formato de salida deseado del resultado escaneado. (JSON por defecto) |
ignore | string[] (opcional) | Una variedad de nombres de archivos o nombres de directorio para excluir del escaneo. |
verbose | boolean (opcional) | Habilite el modo verboso para obtener información de escaneo más detallada. |
debug | boolean (opcional) | Opere el escáner en modo de depuración, proporcionando información de depuración. |
El tipo OutputFormat representa los formatos de salida disponibles.
| Tipo | Descripción |
|---|---|
"json" | Salida El resultado escaneado en formato JSON y guardado como 'componente-perfiles.json' dentro del 'appdir'. |
"stdout" | Muestre el resultado escaneado directamente en la consola (STDOUT). |
Estas opciones y tipos ofrecen flexibilidad y personalización al usar la función VueScanner para analizar proyectos Vue.js.
Para obtener más detalles sobre la clase VueScanner , consulte a continuación.
Al llamar al método scan , escaneará los componentes VUE y devolverá ComponentProfile[] . Aquí hay un ejemplo de cómo puede verse. Para fines de demostración, hemos escaneado un proyecto de código abierto llamado 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 "
}
},
] La biblioteca utiliza Nodejs , TypeScript y Jest para el desarrollo. Dado que esta es una herramienta para detectar componentes VUE, puede encontrar las reglas sobre cómo los componentes VUE en la carpeta de reglas integradas.
Berryjam contiene 2 clases, a saber:
VueScanner : use para escanear un proyecto para perfiles de componentes. Extraerá valores relativos relevantes como fuente, ruta de archivo, nombre de componente de los archivos Packle.json y sus respectivos archivos compatibles para transformar o normalizar los datos de componentes sin procesar que se asignarán a cada perfil de componente.
GitService : si el proyecto tiene la carpeta .git, buscará información relacionada con Git, como el autor y la fecha y hora y el mapa a cada perfil de componente.
Dentro de la clase VueScanner , puede llamar al método scan() para comenzar a escanear. El método abarca 5 pasos principales. Hay lo siguiente:
| Paso | Descripción |
|---|---|
1. Group by Related Package.Json | Dado que hay múltiples archivos de paquete.json y archivos compatibles ( .vue , .js , .jsx , .ts , .tsx y todos los archivos de la carpeta .nuxt (si las hay)), el sistema agrupará y determinará la fuente de origen |
2. Select Analyzer Lib | Para elegir la biblioteca adecuada que coincida con la versión VUE de su proyecto |
3. Prepare Alias Paths | Para reunir todos los alias de archivos de configuración TS, JS y VITE para usar para reemplazar en las declaraciones de 'importar' |
4. Analyze Component Files | Para cada extensión de archivo, el sistema recopilará información de componentes, incluidos los accesorios |
5. Optimize Analyzed Results | Según la información del componente, las mejoras se realizan eliminando los duplicados y formatear el perfil del componente de una manera más estructurada |
A continuación se presentan los principales métodos en la clase GitService :
| Método | Descripción |
|---|---|
gitScanner | Inicie los comandos Git Log Shell para escanear que gitMapping utilizará. |
gitMapping | Usando el resultado de gitScanner para comparar el nombre del componente y el nombre de archivo de registro de git. Si ambos coinciden, la información GIT se actualizará en el perfil de componente respectivo. |
Los complementos de terceros se cargan automáticamente desde el paquete de BerryJam.json
Para obtener más información, consulte la carpeta de documentación.
Estamos agradecidos y agradecidos por todo tipo de contribuciones. Ya sea que nos esté ayudando a informar o arreglar errores, proponer nuevas características, mejorar nuestra documentación o difundir la palabra, nos encantaría tenerlo como parte de la comunidad de Berryjam. Consulte nuestra guía contribuyente y código de conducta.
Si desea comenzar a contribuir de inmediato, navegue a la pestaña Temas de GitHub y comience a buscar problemas interesantes. Puede comenzar trabajando en temas etiquetados bajo documentation y good first issue .
Si se encuentra con un error o un problema mientras usa BerryJam, tiene una idea sobre cómo mejorar Berryjam o tal vez está mirando a través de la documentación y pensando que podría mejorarse ... ¿No dude en enviar un problema?
Si es un desarrollador Vue.js que no está familiarizado con Node.js., puede enviar un problema code example de cómo crea componentes VUE. Consulte nuestras reglas incorporadas para obtener más detalles.
Estamos más que felices de ayudarlo. Si tiene alguna pregunta, tenga un error o enfrente algún problema, no dude en pedir ayuda en Berryjam Discord. ¡Todo lo relacionado con Berryjam está sobre la mesa!
Berryjam se distribuye bajo la licencia MIT. Consulte nuestro archivo License.md para obtener más detalles.
