berryjam
0.1.0-alpha.64
Problèmes - Rejoignez notre discorde - Licence - Berryjam Cloud
Disponible pour: Vue.js (3.x), Nuxt (3.x)
Berryjam fournit un moyen simple d'identifier l'utilisation de vos composants, vos accessoires et leurs relations. En fonction de la sortie de votre scan, vous pouvez créer votre propre tableau de bord et exécuter une analyse entre vos composants de projet pour améliorer les communications à travers votre équipe de développement.
1. Analyser votre projet pour les composants  | 2. Analyser les composants et leurs relations  |
3. Analyser le journal GIT pour l'auteur et la datetime  | 4. Détecter automatiquement les accessoires pour chaque composant  |
Berryjam n'est pas compatible avec les versions VUE 2 ou inférieures.
Berryjam a été entièrement testé pour fonctionner avec la version Node de 16.0 à 18.17.1 (LTS) . Les versions supérieures à 18.17.1 (LTS) devraient également fonctionner mais n'ont pas été entièrement testées.
Il existe plusieurs façons d'installer Berryjam, à savoir NPM, PNPM et YARN. Si vous installez via NPM, voici un seul CMD pour installer cette bibliothèque
npm install berryjam pnpm add berryjam yarn add berryjam Pour commencer à numériser votre projet, vous devrez d'abord importer une classe VueScanner et créer son instance.
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 ( ) ;
} Remarque: Pour un projet Nuxt , veuillez vous assurer que vous disposez d'un dossier .nuxt avant la numérisation.
La fonction VueScanner prend deux paramètres comme suit:
VueScannerOption . Voici la description détaillée de chaque option disponible dans l'interface VueScannerOption :
| Propriété | Taper | Description |
|---|---|---|
appDir | string | La voie du répertoire du projet à analyser. |
output | OutputFormat (facultatif) | Le format de sortie souhaité du résultat numérisé. (JSON par défaut) |
ignore | string[] (Facultatif) | Un tableau de noms de fichiers ou de noms de répertoire à exclure de la numérisation. |
verbose | boolean (facultatif) | Activez le mode verbeux pour des informations de numérisation plus détaillées. |
debug | boolean (facultatif) | Faire fonctionner le scanner en mode débogage, en fournissant des informations de débogage. |
Le type OutputFormat représente les formats de sortie disponibles.
| Taper | Description |
|---|---|
"json" | Sortie le résultat scanné au format JSON et enregistré en tant que «Component-Profiles.json» dans «AppDir». |
"stdout" | Affichez le résultat numérisé directement dans la console (STDOUT). |
Ces options et types offrent une flexibilité et une personnalisation lors de l'utilisation de la fonction VueScanner pour analyser les projets Vue.js.
Pour plus de détails sur la classe VueScanner , veuillez consulter ci-dessous.
En appelant la méthode scan , il évaluera les composants VUE et Return ComponentProfile[] . Voici un exemple de son apparence. À des fins de démonstration, nous avons scanné un projet open source appelé 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 bibliothèque utilise Nodejs , TypeScript et Jest pour le développement. Comme il s'agit d'un outil pour détecter les composants Vue, vous pouvez trouver les règles sur la façon dont Vue composent dans le dossier intégré.
Berryjam contient 2 classes, à savoir:
VueScanner - Utiliser pour scanner un projet pour les profils de composants. Il extraitra les valeurs relatives pertinentes telles que la source, le chemin du fichier, le nom du composant à partir de fichiers package.json et leurs fichiers pris en charge respectifs pour transformer ou normaliser les données de composants brutes qui seront mappées sur chaque profil de composant.
GitService - Si le projet a un dossier .git, il recherchera des informations liées à Git telles que l'auteur et latime et la carte sur chaque profil de composant.
Au sein de la classe VueScanner , vous pouvez appeler sur la méthode scan() pour commencer la numérisation. La méthode comprend 5 étapes principales. Il y en a comme suivant:
| Étape | Description |
|---|---|
1. Group by Related Package.Json | Puisqu'il existe plusieurs fichiers package.json et fichiers pris en charge ( .vue , .js , .jsx , .ts , .tsx et tous les fichiers du dossier .nuxt (le cas échéant)), le système regroupera et déterminera la source d'origine |
2. Select Analyzer Lib | Pour choisir la bonne bibliothèque qui correspond à la version Vue de votre projet |
3. Prepare Alias Paths | Pour rassembler tous les alias à partir des fichiers TS, JS et Vite Config à utiliser pour le remplacement dans les instructions «Importer» |
4. Analyze Component Files | Pour chaque extension de fichier, le système recueillera des informations sur les composants, y compris les accessoires |
5. Optimize Analyzed Results | Sur la base des informations sur les composants, des améliorations sont apportées en supprimant les doublons et en formatant le profil du composant de manière plus structurée |
Vous trouverez ci-dessous les principales méthodes de la classe GitService :
| Méthode | Description |
|---|---|
gitScanner | Initiez les commandes de shell de journal GIT à numériser qui seront utilisées par gitMapping . |
gitMapping | Utilisation du résultat de gitScanner pour comparer le nom du composant et le nom de fichier du journal GIT. Si les deux correspondent, les informations GIT se mettent à jour dans le profil de composant respectif. |
Les plugins tiers sont chargés automatiquement à partir du package de Berryjam.json
Pour plus d'informations, veuillez vous référer au dossier de documentation.
Nous sommes reconnaissants et reconnaissants pour tous les types de contributions. Que vous nous aidiez à signaler ou à corriger les bogues, à proposer de nouvelles fonctionnalités, à améliorer notre documentation ou à passer le mot - nous serions ravis de vous avoir dans le cadre de la communauté Berryjam. Veuillez vous référer à notre guide et code de conduite contribuant.
Si vous souhaitez commencer à contribuer immédiatement, accédez à l'onglet Problèmes GitHub et commencez à examiner des problèmes intéressants. Vous pouvez commencer par travailler sur les problèmes étiquetés sous documentation et good first issue .
Si vous rencontrez une erreur ou un problème lors de l'utilisation de Berryjam, vous avez une idée de la façon de mieux berryjam ou peut-être que vous recherchez la documentation et pensez que cela pourrait être amélioré ... Veuillez n'hésiter pas à soumettre un problème?
Si vous êtes un développeur Vue.js qui ne connaît pas Node.js., vous pouvez soumettre un code example étiqueté sur la façon dont vous créez des composants VUE. Consultez nos rubriques intégrées pour plus de détails.
Nous sommes plus qu'heureux de vous aider. Si vous avez des questions, rencontrez des erreurs ou faites face à des problèmes, n'hésitez pas à demander de l'aide dans Berryjam Discord. Tout ce qui est lié à Berryjam est sur la table!
Berryjam est distribué sous licence MIT. Veuillez vous référer à notre fichier licence.md pour plus de détails.
